功能:
- 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 (window.confirm("确认删除?")){
document.getElementById("wenben").innerText = ""
}
}
</script>
<script>
//打开新窗口
function dakai(url){
window.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">
欢迎加入全栈开发交流群一起学习交流:864305860
</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>//欢迎加入全栈开发交流群一起学习交流:864305860
复制代码