javaweb06-DOM案例

来源：互联网发布：java线程池阻塞队列编辑：程序博客网时间：2024/06/05 17:42

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>创建表格</title><!-- 定义一些样式,将来给表格用 --><style type="text/css">table{border:#0099FF 1px solid;width:600px;border-collapse:collapse;}table td{border:#0099FF 1px solid;padding:10px 20px 3px 1px; }</style><script type="text/javaScript">function createTable(){/*var tabEle = document.createElement("table");//<table></table>var tr = document.createElement("tr");//<tr></tr>var td1 = document.createElement("td");//<td></td>var td2 = document.createElement("td");//<td></td>var text1 = document.createTextNode("1行1列");var text2 = document.createTextNode("1行2列");td1.appendChild(text1);td2.appendChild(text2);tr.appendChild(td1);tr.appendChild(td2);tabEle.appendChild(tr);var div_id = document.getElementById("div_id");div_id.appendChild(tabEle);*/var div_id = document.getElementById("div_id");div_id.innerHTML = "<table>"+"<tr>"+"<td>one</td>"+"<td>two</td>"+"</tr>"+"</table>";}function createTable2(){var tabEle = document.createElement("table");//<table></table>for(var i=1;i<=5;i++){var tr = document.createElement("tr");//<tr></tr>for(var j=1;j<=6;j++){var td = document.createElement("td");//<td></td>td.innerText=i+"行"+j+"列";tr.appendChild(td);}tabEle.appendChild(tr);}var div_id = document.getElementById("div_id");div_id.appendChild(tabEle);}function createTable3(){var row = document.getElementById("row").value;var col = document.getElementById("col").value;var tabEle = document.createElement("table");//<table></table>for(var i=1;i<=row;i++){var tr = document.createElement("tr");//<tr></tr>for(var j=1;j<=col;j++){var td = document.createElement("td");//<td></td>td.innerText=i+"行"+j+"列";tr.appendChild(td);}tabEle.appendChild(tr);}var div_id = document.getElementById("div_id");div_id.appendChild(tabEle);}</script></head><body><div id="div_id"></div><input type="button" value="创建表格" onclick="createTable()" /><br /><input type="button" value="创建表格(5行6列)" onclick="createTable2()" /><br />行数:<input type="text" name="row" id="row"/><br />列数:<input type="text" name="col" id="col"/><br /><input type="button" name="createButton" value="创建表格(行列用户输入)" onclick="createTable3()" /></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>单选按钮</title><style type="text/css">#result1{display : none;}#result2{display : none;}#result3{display : none;}#result4{display : none;}</style><script type="text/javaScript">function show(tag){//1.先将所有的div隐藏for(var i = 1;i<=4;i++){var div = document.getElementById("result"+i);div.style.display = "none";}//2.将所选的显示出来var v = tag.value;var div = document.getElementById("result"+v);div.style.display = "block";}</script></head><body><div><h3>测试你的性格:</h3><div>请选择下列一种水果:</div><input type="radio" name="fruit" value="1" onclick="show(this)" />苹果<br /><input type="radio" name="fruit" value="2"  onclick="show(this)"/>西瓜<br /><input type="radio" name="fruit" value="3"  onclick="show(this)"/>葡萄<br /><input type="radio" name="fruit" value="4"  onclick="show(this)"/>芒果<br /><div id="result1">您的性格,很羞涩.</div><div id="result2">您的性格,很开朗.</div><div id="result3">您的性格,很内向.</div><div id="result4">您的性格,很醇香.</div></div></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>全选反选问题</title><script>function getSum(){//1.获取所有被选中的checkbox,循环遍历,获取value累加var money = 0;var items = document.getElementsByName("item");for(var i = 0;i<items.length;i++){//如果被选中,则加上钱if(items[i].checked){money = parseInt(items[i].value)+money;}}//2.写入span中document.getElementById("sumId").innerHTML = money+"元";}function checkAll(all){//1.获取所有的itemvar items = document.getElementsByName("item");//2.把所有item的选中状态设置的和全选一样for(var i= 0;i<items.length;i++){items[i].checked = all.checked;}}function check(){//1.获取所有的itemvar items = document.getElementsByName("item");//2.遍历,拿到每个item ,将他的checked属性取反for(var i= 0;i<items.length;i++){items[i].checked = !items[i].checked;}}/*扩展部分:全选按钮的进一步设置*/window.onload = function(){var items = document.getElementsByName("item");for(var i= 0;i<items.length;i++){items[i].onclick = function(){var ac = document.getElementById("allC");//1.如果是不选,全选按钮就不选if(!this.checked){ac.checked = false;}else{//2.如果是选,则检查是否都选上了,如果都选上了,则全选要选上var isAllChoose = true;var items = document.getElementsByName("item");for(var i = 0 ;i<items.length;i++){if(!items[i].checked){isAllChoose = false;break;}}ac.checked = isAllChoose;}}}}</script></head><body><div>商品列表</div><input type="checkbox" name="item" value="3000" />笔记本3000元<br /><input type="checkbox" name="item" value="2500"/>HTC手机2500<br /><input type="checkbox" name="item" value="8000" />苹果电脑8000<br /><input type="checkbox" name="item" value="1500" />IPAD1500<br /><input type="checkbox" name="item" value="400" />玩具汽车400<br /><input type="checkbox" id="allC" name="all" onclick="checkAll(this)"/>全选<br /><input type="checkbox" name="all" onclick="check()"/>反选<br /><input type="button" value="总金额" onclick="getSum()" /><span id="sumId"></span></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉框</title><script>function getCountry(){/*var sel = document.getElementsByName("country")[0];alert(sel.value)var sel = document.getElementsByName("country")[0];for(var i = 0;i<sel.options.length;i++){if(sel.options[i].selected == true){alert(sel.options[i].value)}}*/}/*select中opstions是所有选项组成集合,通过增删改这个集合可以改变select 的选项卡*/function addOne(){var sel = document.getElementsByName("country")[0];var op = document.createElement("option");op.innerHTML="法国";op.value="法国";var ops = sel.options;var temp =ops[3];ops[3]=op;ops[4]=temp;//[none,中,美,法,日]}</script></head><body><select name="country" onchange="getCountry()"><option value="none">--选择国家--</option><option value="中国">中国</option><option value="美国">美国</option><option value="日本">日本</option></select><input type="button" value="加一个" onclick="addOne()"/></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>二级联动菜单</title><style></style><script>function selectCity(){var citys = {北京市:["海淀区","朝阳区","丰台区"],河北省:["石家庄","唐山","秦皇岛"],辽宁省:["沈阳","大连","鞍山"],山东省:["青岛","济南","烟台"]}//1.获取所选的省份var prov = document.getElementById("province").value;var city = document.getElementById("city");//2.查询这个省份下的地区信息var cs = citys[prov];//--先清空历史的city.options.length = 1;if(cs!=null){//3.将地区信息组织成option,插入到地区select中for(var i=0;i<cs.length;i++){//再将当前省份的内容插入var op = document.createElement("option");op.innerText = cs[i];city.appendChild(op);}}}</script></head><!--  var citys = {北京市:["海淀区","朝阳区","丰台区"],河北省:["石家庄","唐山","秦皇岛"],辽宁省:["沈阳","大连","鞍山"],山东省:["青岛","济南","烟台"]}         --><body><select id="province" onchange="selectCity()"><option>--选择省市--</option><option>北京市</option><option>河北省</option><option>辽宁省</option><option>山东省</option></select><select id="city"><option>--选择城市--</option></select></body></html>

6.表单校验！！！！！！

<html><head><title></title><style type="text/css">body{background:#f0f0f0;margin:2px;padding:4px;font-size:16px;}.main{background:#e0e0e0;margin:2px 200px auto 200px;padding:4px;}span{font-size:12px;color:red;padding-left:12px;}</style><script type="text/javaScript">/*非空校验*/function checkNull(){/*var un=document.getElementsByName("username")[0];if(un.value==""){alert("用户名不能为空！");}*/var nflag=true;//1.用户名非空校验nflag=setNull("username","用户名不能为空！")&&nflag;//2.密码非空校验nflag=setNull("password1","密码不能为空！")&&nflag;//3.确认密码非空校验nflag=setNull("password2","确认密码不能为空！")&&nflag;//9.密码不一致校验nflag=checkEquals()&&nflag;//3.邮箱校验nflag=checkEmail()&&nflag;//4.校验爱好是否为空nflag=setLikeNull()&&nflag;//5.校验所在地是否为空nflag=checkCityNull()&&nflag;//6.校验客户类型是否为空nflag=checkTypeNull()&&nflag;//7.校验客户类型是否为空nflag=checkTextNull()&&nflag;return nflag;}/*邮箱校验*/function checkEmail(){//setNull("email","");//获取邮箱对象var email=document.getElementById("email");var emailm=document.getElementById("email_m");var eflag=setNull("email","邮箱不能为空！");//创建正则表达式 /^\w+@\w+(\.\w+)+$///alert(email.value.match(/^\w+@\w+(\.\w+)+$/));if(eflag&&!/^\w+@\w+(\.\w+)+$/.test(email.value)){emailm.innerText="邮箱格式不匹配";eflag=false;}return eflag;}function reCheckEmail(){checkEmail();}/*密码不一致校验*/function checkEquals(){//获取到两次的密码项对象var pwd1=document.getElementsByName("password1")[0];var pwd2=document.getElementsByName("password2")[0];var pwdm=document.getElementById("password2_m");//alert(pwd1.value==pwd2.value);if(pwd1.value!=""&&pwd2.value!=""&&pwd1.value!=pwd2.value){//alert(pwd1.value==pwd2.value);pwdm.innerText="密码不一致";return false;}else{//pwdm.innerText="";return true;}}/*文本域内容非空校验*/function checkTextNull(){//获取文本域所在标签对象var tao=document.getElementsByName("description")[0];if(tao.value==tao.defaultValue){alert("请输入描述信息");return false;}return true;}/*客户类型非空校验*/function checkTypeNull(){//获取客户类型所在标签对象var cusType=document.getElementsByName("type")[0];var tym=document.getElementById("ty_m");if(cusType.value=="----"){//alert("请选择客户类型");tym.innerText="**请选择客户类型**";return false;}else{tym.innerText="";return true;}}/*省市内容非空校验*/function checkCityNull(){//获取城市标签对象var city=document.getElementsByName("city")[0];var citym=document.getElementById("pc_m");if(city.options.length==1){//alert("请选择所在省份");citym.innerText="**请选择所在省份**";return false;}else{citym.innerText="";if(city.value=="-选择城市-"){//alert("请选择所在城市");citym.innerText="**请选择所在城市**";return false;}else{citym.innerText="";return true;}}}window.onload=function(){/*文本域初始内容的移入移除切换*///获取文本域所在标签对象var tao=document.getElementsByName("description")[0];tao.onclick=function(){if(tao.value==tao.defaultValue){tao.value="";}}tao.onblur=function(){if(tao.value==""){tao.value=tao.defaultValue;}}/*省市二级联动菜单效果实现*///定义一个省市关联数组var citys={北京市:["朝阳区","海淀区","东城区","西城区"],河南省:["郑州市","洛阳市","平顶山市","信阳市"],湖北省:["武汉市","荆州市","十堰市","黄岗市"],浙江省:["杭州市","宁波市"]}//获取省份标签对象var prov=document.getElementsByName("province")[0];//获取下拉项的集合var provs=prov.options;//获取到城市标签对象var city=document.getElementsByName("city")[0];for(var i=0;i<provs.length;i++){provs[i].onclick=function(){city.options.length=1;if(this.value!="-选择省市-"){var cys=citys[this.value];for(var j=0;j<cys.length;j++){var cy=document.createElement("option");cy.innerText=cys[j];city.appendChild(cy);}}}}}//爱好非空校验function setLikeNull(){var uns=document.getElementsByName("like");var unsm=document.getElementById("like_m");var lflag=false;for(var i=0;i<uns.length;i++){if(uns[i].checked){lflag = true;break;}}if(!lflag){//alert("爱好不能为空！");unsm.innerText="*爱好不能为空！";return lflag;}else{unsm.innerText="";return lflag;}}/*设置非空(弹窗)文本提示消息*/function setNull(name,msg){var un=document.getElementsByName(name)[0];var unm=document.getElementById(name+"_m");if(un.value==""){//alert(msg);unm.innerText="**"+msg+"**";return false;}else{unm.innerText="";}return true;}/*校验表单,提交*/function onSub(){if(checkNull()){//获取表单对象 var fm=document.getElementsByTagName("form")[0];fm.submit();}}/*制空表单*/function onReset(){//获取表单对象var fm=document.getElementsByTagName("form")[0];fm.reset();}/*复选框点击时触发*/function reLike(){setLikeNull();}/*下拉框点击时触发*/function reCheck(){checkCityNull();}function reCheckType(){checkTypeNull();}/*输入框失去焦点时触发*/function lostF(obj){if(obj.name=="password2"&&obj.value!=""){if(checkEquals()){//alert(obj.hasChildNodes());//.innerText="";var sid=document.getElementById("password2_m");sid.innerText="";}}else{setNull(obj.name,"内容不能为空");}}</script></head><body><!-- 创建一个表单用户名、密码、确认密码、性别、爱好、客户类型、描述信息、自定义提交，重置按钮--><div class="main"><form action="success.html" method="post"><table border="1px" bgColor="#cfcfcf" align="center" cellspacing="5px" cellpadding="7px"><caption><font color="blue" size="+3">校验表单</font></caption><tr><td>用户名：</td><td><input type="text" name="username" onblur="lostF(this)"/><span id="username_m"></span></td></tr><tr><td>密码：</td><td><input type="password" name="password1" onblur="lostF(this)"/><span id="password1_m"></span></td></tr><tr><td>确认密码：</td><td><input type="password" name="password2" onblur="lostF(this)"/><span id="password2_m"></span></td></tr><tr><td>性别：</td><td><input type="radio" name="gender" checked="checked" value="男"/>男<input type="radio" name="gender" value="女"/>女</td></tr><tr><td>爱好：</td><td><input type="checkbox" name="like" value="zq" onclick="reLike()"/>足球<input type="checkbox" name="like" value="lq" onclick="reLike()"/>篮球<input type="checkbox" name="like" value="ppq" onclick="reLike()"/>兵乓球<input type="checkbox" name="like" value="wq" onclick="reLike()"/>网球<input type="checkbox" name="like" value="pq" onclick="reLike()"/>排球<span id="like_m"></span></td></tr><tr><td>邮箱：</td><td><input id="email" type="text" name="email" onblur="reCheckEmail()"/><span id="email_m"></span></td></tr><tr><td>所在省市：</td><td><select name="province" onclick="reCheck()"><option selected="selected">-选择省市-</option><option>北京市</option><option>河南省</option><option>湖北省</option><option>浙江省</option></select><select name="city" onclick="reCheck()"><option selected="selected">-选择城市-</option></select><span id="pc_m"></span></td></tr><tr><td>客户类型：</td><td><select name="type" onclick="reCheckType()"><option selected="selected">----</option><option>钻石客户</option><option>白金客户</option><option>VIP客户</option><option>普通客户</option></select><span id="ty_m"></span></td></tr><tr><td>描述信息：</td><td><textArea name="description" rows="8" cols="60">请输入描述信息....</textArea></td></tr><tr><td colspan="2" align="center"><input type="button" id="onsubmit" value="提交" onclick="onSub()"/><input type="button" id="onreset" value="重置" onclick="onReset()"/></td></tr></table></form></div></body></html>

0 0