功能:
1. 向页面写入数据
2. 删除页面数据 + 删除提示 [确实] 才删除
3. 获取表单输入的内容, 并简单验证
4. 打开一个新的窗口
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>JS 简单应用 </title>
- <script>
- // 欢迎弹出框 默认直接执行
- document.write("<h2 id ='biaoti'>
- " +
- " Welcome!
- " +
- "</h2>")
- // 添加你好
- function tianji(){
- alert("欢迎来到我的个人网站!")
- document.getElementById("biaoti").append("你好!")
- }
- // 再见提示
- function zaijian() {
- alert("您要走了? 下次别来了")
- }
- </script>
- <script>
- // 表单验证
- function tishi() {
- // 获取输入的值 (通过 name)
- var num = document.myform.num.value;
- alert(num);
- // 获取输入的值 (通过 id)
- var buben = document.getElementById("buben").value;
- alert(buben);
- // 获取 [已选中的] 多选框的值
- var xingqu = "";
- for (var i=0;i<document.myform.aihao.length;i++){
- if (document.myform.aihao[i].checked){
- // 判断是不是最后一个, 是的话, 不加逗号, 不是的话加上逗号
- if (i == document.myform.aihao.length-1) {
- xingqu += document.myform.aihao[i].value;
- }else{
- xingqu += document.myform.aihao[i].value + ",";
- }
- }
- }
- alert(xingqu);
- }
- </script>
- <script>
- // 确认删除?
- function queren() {
- if (Windows.confirm("确认删除?")){
- document.getElementById("wenben").innerText = ""
- }
- }
- </script>
- <script>
- // 打开新窗口
- function dakai(url){
- Windows.open(url,"页面标题","width=500, height=300,scrollbars=yes,resizable=no")
- }
- </script>
- </head>
- <!--onunload 关闭窗口是执行 -->
- <body onunload="zaijian()">
- <!-- 点击触发添加: 你好!-->
- <button onclick=tianji() style="color: brown"> 添加 [你好!] </button>
- <hr>
- <!-- 表单验证 -->
- <form action=""method="post"name="myform"onsubmit="tishi()">
- 编号:<input type="text" name="num" value="01212"><br>
- 姓名:<input type="text" name="username" value="请输入姓名"><br>
- 密码:<input type="password" name="pwd" value="请输入密码"><br>
- 性别:<input type="radio" name="sex" value="男" checked > 男 <input type="radio" name="sex" value="女"> 女 < br>
部门:
- <select id="buben">// 欢迎加入全栈开发交流群一起学习交流: 864305860
- <option value="技术部"> 技术部 </option>
- <option value="销售部" SELECTED > 销售部 </option>
- <option value="财务部"> 财务部 </option>
- </select><br>
兴趣:
- <input type="checkbox" name="aihao" value="游泳"> 游泳
- <input type="checkbox" name="aihao" value="唱歌"> 唱歌
- <input type="checkbox" name="aihao" value="编程"> 编程
- <input type="checkbox" name="aihao" value="博客" checked > 博客
- <br>
说明:<textarea name="shuoming" cols="30" rows="3">
个人博客: cnblogs.com/xpwi
- </textarea><br>
- <input type="submit" value="点击 [注册]" style="color: brown"> <input type="reset" value="重置">
- </form>
- <hr>
- <p id="wenben">
- </p>
- <button style="color: brown" onclick="queren()"> 点击 [删除] </button>
- <br>
- <hr>
- <!-- 打开小页面 -->
- <form>
- <p style="color: brown"> 请选择 [小页面] :</p>
- <select name=""onchange="dakai(this.value)">
- <option value="""> 请选择:</option>
- <option value="h01Biaodan.html">h01Biaodan.HTML: 注册表单页面 </option>
- <option value="h02Js.html">h02Js.HTML:JS 提示框, 简单触发事件, 写入 DOM</option>
- <option value="h03JsShuchu.html">h03JsShuchu.HTML:JS 提示输入信息, 获取输入的信息, 判断输入信息 </option>
- </select>
- </form>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/51117/4ea9e26997bd9a1f7bfc856f9dc90a0e.html