学习笔记2-确认删除操作-动态添加元素、事件-用户注册界面

刚学完函数进阶部分的内容，为了加深记忆，特意来这里重写一遍代码。

//A.确认删除操作

<input type="button" value="删除" id="button1" onClick="fun1()"><script>function fun1(){if(confirm("确定删除吗？")){alert("你已完成删除操作");}else{alert("你已取消了删除操作");}}</script>

//B.动态添加元素（标签）、事件

添加元素：

<input type="button" value="按钮" id="button2" onClick="fun2()"><script>var i=0;function fun2(){var obj=document.createElement("input");obj.type="button";obj.value="按钮"+i++;obj.addEventListener("click",fun2);//这句的意思是为按钮添加监听事件，使得点击新增加的按钮也能添加新按钮。document.body.appendChild(obj);}</script>

添加事件：

<input type="button" value="butn1" id="btn1"><input type="button" value="butn2" id="btn2" onClick="fun3(btn1)"><script>function fun3(obj){obj.onclick=function(){alert("添加事件成功");}}</script>

//C.用户注册界面

<table><tr><td>用户名：</td><td><input type="text" id="tr1"></td></tr><tr><td>联系方式：</td><td><input type="text" id="tr2"></td></tr><tr><td>密码：</td><td><input type="password" id="tr3"></td></tr><tr><td>确认密码：</td><td><input type="password" id="tr4" onBlur="check()"></td></tr><tr><td>性别：</td><td><input type="radio" name="sex" id="sex1">男<input type="radio" name="sex" id="sex2">女</td></tr><tr><td>学历：</td><td><select name="select" id="select"><option value="高中">高中</option><option value="大专">大专</option><option value="本科">本科</option><option value="本科以上">本科以上</option></select></td></tr><tr><td colspan="2"><input type="submit" value="提交" onClick="cs()"><input type="reset" value="重置"></td></tr></table><script>function $(id){return document.getElementById(id);}function check(){var boo=$('tr3').value==$('tr4').value;if(boo){return true;}else{alert("密码不正确");return false;}}function cs(){var str='';str+="\n用户名：";str+=$('tr1').value;str+="\n联系方式："+$('tr2').value;str+="\n性别：";str+=$('sex1').checked?'男':'女';alert('用户信息：'+str);}</script>

密码验证，两次不一致，当文本框失去焦点时，提示密码有误：

当输入完信息后，点击提交，弹出用户的基本信息：

finished.