Dom编程练习程序(11-17)

程序十一、完成一个与css手册中一样的示例。通过下拉菜单选择显示指定样式属性的使用效果实现以上图形效果，程序代码如下：*无标题文档#cssidheight:80px;width:160px;background-color:#FFCC00;#textidbackground-color:#CCCCCC;width:300px;function change()var selNode = byId(selid);var value = selNode.optionsselNode.selectedIndex.value;/alert(value);var divNode1 = byId(cssid);var divNode2 = byId(textid);divNode1.style.textTransform = value;divNode2.innerText = text-transform :+value+;Good good study,Day day up!-text-transform- 首字母大写 所有字母大写所有字母小写text-transform:none;*程序十二、Css样式的分层显示效果获取鼠标的坐标，让指定的区域随着鼠标移动。获取鼠标坐标：event.x,event.y；指定区域随鼠标移动其实就是改变了指定区域的left、top的值。这里需要用到的事件：body对象的onmousemove事件。还需要用到一个css样式。直接定义页面，所有的区域都在同一层次。为了对某一个区域进行定位。将该区域分离出来，分离到另一个层次，用到了css中的position属性。*无标题文档#bodyidborder:#000000 1px solid;height:600px;width:800px;window.onload = function()document.body.onmousemove = function()var adNode = document.getElementById(ad);adNode.style.left = event.x;adNode.style.top = event.y;body区域*程序十三、实现级联菜单的选择，当选择某个省时，会自动列出所包含的区域：如下图*无标题文档function selCity()var arr = -选择城市-,海淀区,朝阳区,东城区,西城区,昌平区,沈阳,大连,鞍山,抚顺,济南,青岛,烟台,威海,济宁,洛阳,郑州,安阳,南阳,开封var index = byId(selid).selectedIndex;/alert(byId(selid).optionsindex.innerText);var subselNode = byId(subselid);var citys = arrindex;/*方法一：清空上一次选择身份后的现实内容，注意：角标自增、长度自减的情况for(var x=0;xsubselNode.options.length;)/alert(x+.+subselNode.optionsx.innerText+.+subselNode.options.length);subselNode.removeChild(subselNode.optionsx);*/方法二：直接将subselNode.options.length = 0;subselNode.options.length = 0;for(var x=0;xcitys.length;x+)var optNode = doc.createElement(option);optNode.innerText = citysx;subselNode.appendChild(optNode);-选择省市- 北京 辽宁 山东 河南-选择城市- *程序十四、实现如下图所示：用户通过单击“添加附件”按钮实现附件的添加，可添加多个，然后可通过后面的“删除附件”按钮将不需要的附件删除。*无标题文档table td a:link,table td a:visitedtext-decoration:none;color:#000066;tableborder:#000066 1px solid;var count = 1;function addFile()var tabNode = byTag(table)0;var trNode = tabNode.insertRow();trNode.id = tr_+count;var tdNode_file = trNode.insertCell();var tdNode_del = trNode.insertCell();tdNode_file.innerHTML = ;tdNode_del.innerHTML = 删除+count+附件;count+;function delfile(num)var trNode = byId(tr_+num);/*删除动作,可以合并成一句var tabNode = byTag(table)0;var tbdNode = tabNode.childNodes0;tbdNode.removeChild(trNode);*/trNode.parentNode.removeChild(trNode);function delfiel_1(node)var trNode = node.parentNode.parentNode;trNode.parentNode.removeChild(trNode); 添加附件 *程序十五实现如下图所示功能：包含三个全选、一个取消选择、一个反选、一个删除所选邮件*无标题文档tableborder:#0000FF 1px solid;width:70%;table td,table thborder:#0099FF 1px solid;table thbackground-color:#006600;.onebackground-color:#FFFF99;.twobackground-color:#33FFFF;.overbackground-color:#006699;/行颜色间隔显示并高亮var name;function trColor()var tabNode = document.getElementsByTagName(table)0;var trs = tabNode.rows;for(var x=1;xtrs.length-1;x+)if(x%2=1)trsx.className = one;elsetrsx.className = two;trsx.onmouseover = function()name = this.className;this.className = over;trsx.onmouseout = function()this.className = name;window.onload = function()trColor();/完成checkbox的全选动作function checkAll(index)var allNode = document.getElementsByName(all)index;var mails = document.getElementsByName(mail);for(var x=0;xmails.length;x+)mailsx.checked = allNode.checked;/完成按钮的选取。function checkByBut(num)var mails = document.getElementsByName(mail);for(var x=0;x1)mailsx.checked = !mailsx.checked;elsemailsx.checked = num;/删除所选邮件function delMail()if(!window.confirm(你真的要删除所选邮件吗？)return;var mails = document.getElementsByName(mail);var arr = new Array();var pos = 0;for(var x=0;xmails.length;x+)if(mailsx.checked)var trNode = mailsx.parentNode.parentNode;/trNode.parentNode.removeChild(trNode);arrpos+ = trNode;for(var x=0;xarr.length;x+)var trNode = arrx;trNode.parentNode.removeChild(trNode);trColor(); 全选 发件人 邮件名称 input type=checkbox name=mail 张三 新的邮件 input type=checkbox name=mail 张三00 新的邮件 input type=checkbox name=mail 张三11 新的邮件 input type=checkbox name=mail 张三22 新的邮件 input type=checkbox name=mail 张三33 新的邮件 input type=checkbox name=mail 张三44 新的邮件 input type=checkbox name=mail 张三55 新的邮件 input type=checkbox name=mail 张三66 新的邮件 input type=checkbox name=mail 张三6aa 新的邮件 input type=checkbox name=mail 张三cd 新的邮件 全选 *程序十六、实现如下图所示功能：用户名要求5个小写字母，密码要求5个数字，邮箱格式””*无标题文档#useryes,#usernodisplay:none;/*function checkUser(userNode)var name = userNode.value;var namereg = new RegExp(a-z5$);var spanNode = byId(userspan);if(name.match(namereg)/spanNode.innerHTML = 用户名正确.fontcolor(green);else/spanNode.innerHTML = 错误的用户名.fontcolor(red);*/function checkUser(userNode)var name = userNode.value;var namereg = /a-z5$/i;/加上参数i表示忽略大小写/var namereg = new RegExp(a-z5$);var spanNode1 = byId(useryes);var spanNode2 = byId(userno);if(name.match(namereg)spanNode1.style.display = inline;spanNode1.style.color = green;spanNode2.style.display = none;elsespanNode2.style.display = inline;spanNode2.style.color = red;spanNode1.style.display = none;function checkPsw(pswNode)var pass = pswNode.value;/var passreg = new RegExp(d5$);var passreg = /d5$/;var spanNode = byId(pswspan);if(pass.match(passreg)spanNode.innerHTML = 密码正确.fontcolor(green);elsespanNode.innerHTML = 密码错误.fontcolor(red);function checkMail(mailNode)var mail = mailNode.value;var mailreg = /w+w+(.w+)+$/var spanNode = byId(mailspan);if(mailreg.test(mail)spanNode.innerHTML = 邮件正确.fontcolor(green);elsespanNode.innerHTML = 邮件错误.fontcolor(green);function checkForm()/event.returnValue = false;return false;用户名称：用户名正确用户名错误输入密码：确认密码：邮件地址：*程序十七、利用table td,table th组合选择其和关联选择器；完成如下注册表单事件！在没有向表单项中输入内容时，每个表单项下面都有提示信息。当每个表单项目输入的格式不正确，表单项外面显示红色边框，下面显示错误提示信息。所有表单项都按照格式输入后，才可以单击“提交按钮”进行提交。*无标题文档tableborder:#0066FF 1px solid;width:600px;border-collapse:collapse;table td,table thborder:#0066FF 1px solid;padding:10px;table tdbackground-color:#FFFF99;table thbackground-color:#FF6600;#respswspanmargin-left:115px;.erroinfocolor:#FF0000;display:none;.focusborder:#0099FF 2px solid;.normborder:#999999 1px solid;.errorborder:#999999 2px solid;function inputColor(input)input.className = norm;input.onfocus = function()this.className = focus;window.onload = function()with(document.forms0)inputColor(user);inputColor(psw);inputColor(repsw);inputColor(mail);/校验方法function check(inputNode,regex,divId)var b = false;var divNode = document.getElementById(divId);if(regex.test(inputNode.value)inputNode.className = norm;divNode.style.display = none;b = true;elseinputNode.className = error;divNode.style.display = block;return b;/校验用户名,老是的，麻烦，已过期function checkUserDemo(userNode)var value = userNode.value;var regex = /w3,5$/;var divNode = document.getElementById(userdiv);if(regex.test(value)userNode.className = norm;divNode.style.display = none;elseuserNode.className = error;divNode.style.display = block;/校验用户名function checkUser(userNode)var regex = /w3,5$/;return check(userNode,regex,userdiv);/校验密码function checkPsw(pswNode)var regex = /a-z0-93,5$/i;return check(pswNode,regex,pswdiv);/校验确认密码functio