黑马程序员-DOM编程基础知识练习程序（11-17）

最新推荐文章于 2022-04-25 20:30:34 发布

u010962965

最新推荐文章于 2022-04-25 20:30:34 发布

阅读量719

点赞数

文章标签：黑马程序员编程标签 HTML JavaScript

本文链接：https://blog.csdn.net/u010962965/article/details/9095003

版权

<a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IO开发S</a>、<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！

程序十一、

完成一个与css手册中一样的示例。通过下拉菜单选择显示指定样式属性的使用效果

实现以上图形效果，程序代码如下：

<html>*************************************************************************

<head>

<title>无标题文档</title>

#cssid{

height:80px;

width:160px;

background-color:#FFCC00;

}

#textid{

background-color:#CCCCCC;

width:300px;

}

</style>

function change()

{

var selNode = byId("selid");

var value = selNode.options[selNode.selectedIndex].value;

//alert(value);

var divNode1 = byId("cssid");

var divNode2 = byId("textid");

divNode1.style.textTransform = value;

divNode2.innerText = "text-transform :"+value+";";

}

</script>

</head>

<body>

Good good study,Day day up!

</div>

<p>

</p>

<option value="none">--text-transform--</option>

<option value="capitalize">首字母大写</option>

<option value="uppercase">所有字母大写</option>

<option value="lowercase">所有字母小写</option>

</select>

<p>

</p>

text-transform:none;

</div>

</body>

</html>************************************************************************

程序十二、

Css样式的分层显示效果

获取鼠标的坐标，让指定的区域随着鼠标移动。

获取鼠标坐标：event.x,event.y；

指定区域随鼠标移动其实就是改变了指定区域的left、top的值。

这里需要用到的事件：body对象的onmousemove事件。

还需要用到一个css样式。直接定义页面，所有的区域都在同一层次。

为了对某一个区域进行定位。将该区域分离出来，分离到另一个层次，

用到了css中的position属性。

<html xmlns="http://www.w3.org/1999/xhtml">******************************************

<head>

<title>无标题文档</title>

#bodyid{

border:#000000 1px solid;

height:600px;

width:800px;

}

</style>

window.onload = function()

{

document.body.onmousemove = function()

{

var adNode = document.getElementById("ad");

adNode.style.left = event.x;

adNode.style.top = event.y;

}

</script>

</head>

<body>

</div>

body区域

</div>

</body>

</html>********************************************************************

程序十三、

实现级联菜单的选择，当选择某个省时，会自动列出所包含的区域：如下图

<html xmlns="http://www.w3.org/1999/xhtml">********************************

<head>

<title>无标题文档</title>

function selCity()

{

var arr = [["--选择城市--"],["海淀区","朝阳区","东城区","西城区","昌平区"],

["沈阳","大连","鞍山" ,"抚顺"],["济南","青岛","烟台","威海",

"济宁"],["洛阳","郑州","安阳","南阳","开封"]]

var index = byId("selid").selectedIndex;

//alert(byId("selid").options[index].innerText);

var subselNode = byId("subselid");

var citys = arr[index];

/*方法一：清空上一次选择身份后的现实内容，注意：角标自增、长度自减的情况

for(var x=0;x<subselNode.options.length;)

{

//alert(x+"....."+subselNode.options[x].innerText+"..."+subselNode.options.length);

subselNode.removeChild(subselNode.options[x]);

}

//方法二：直接将subselNode.options.length = 0;

subselNode.options.length = 0;

for(var x=0;x<citys.length;x++)

{

var optNode = doc.createElement("option");

optNode.innerText = citys[x];

subselNode.appendChild(optNode);

}

</script>

</head>

<body>

</select>

</select>

</body>

</html>********************************************************************

程序十四、

实现如下图所示：用户通过单击“添加附件”按钮实现附件的添加，可添加多个，然后可通过后面的“删除附件”按钮将不需要的附件删除。

<html xmlns="http://www.w3.org/1999/xhtml">********************************

<head>

<title>无标题文档</title>

table td a:link,table td a:visited{

text-decoration:none;

color:#000066;

}

table{

border:#000066 1px solid;

}

</style>

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 = "<input type='file' />";

tdNode_del.innerHTML = "<a href='javascript:void(0)' οnclick='delfile("+count+")'>删除"+count+"附件</a>";

count++;

}

function delfile(num)

{

var trNode = byId("tr_"+num);

/*删除动作,可以合并成一句

var tabNode = byTag("table")[0];

var tbdNode = tabNode.childNodes[0];

tbdNode.removeChild(trNode);

trNode.parentNode.removeChild(trNode);

}

function delfiel_1(node)

{

var trNode = node.parentNode.parentNode;

trNode.parentNode.removeChild(trNode);

}

</script>

</head>

<body>

<table>

<tr>

<td>

</td>

</tr>

</table>

</body>

</html>*******************************************************************

程序十五

实现如下图所示功能：包含三个全选、一个取消选择、一个反选、一个删除所选邮件

<html xmlns="http://www.w3.org/1999/xhtml">********************************

<head>

<title>无标题文档</title>

table{

border:#0000FF 1px solid;

width:70%;

}

table td,table th{

border:#0099FF 1px solid;

}

table th{

background-color:#006600;

}

.one{

background-color:#FFFF99;

}

.two{

background-color:#33FFFF;

}

.over{

background-color:#006699;

}

</style>

//行颜色间隔显示并高亮

var name;

function trColor()

{

var tabNode = document.getElementsByTagName("table")[0];

var trs = tabNode.rows;

for(var x=1;x<trs.length-1;x++)

{

if(x%2==1)

{

trs[x].className = "one";

}

else

trs[x].className = "two";

trs[x].onmouseover = function()

{

name = this.className;

this.className = "over";

}

trs[x].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;x<mails.length;x++)

{

mails[x].checked = allNode.checked;

}

//完成按钮的选取。

function checkByBut(num)

{

var mails = document.getElementsByName("mail");

for(var x=0;x<mails.length;x++)

{

if(num>1)

mails[x].checked = !mails[x].checked;

else

mails[x].checked = num;

}

//删除所选邮件

function delMail()

{

if(!window.confirm("你真的要删除所选邮件吗？"))

return;

var mails = document.getElementsByName("mail");

var arr = new Array();

var pos = 0;

for(var x=0;x<mails.length;x++)

{

if(mails[x].checked)

{

var trNode = mails[x].parentNode.parentNode;

//trNode.parentNode.removeChild(trNode);

arr[pos++] = trNode;

}

for(var x=0;x<arr.length;x++)

{

var trNode = arr[x];

trNode.parentNode.removeChild(trNode);

}

trColor();

}

</script>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</th>

</tr>

</table>

</body>

</html>********************************************************************

程序十六、

实现如下图所示功能：用户名要求5个小写字母，密码要求5个数字，邮箱格式”smhjx2006@163.com”

<html xmlns="http://www.w3.org/1999/xhtml">********************************

<head>

<title>无标题文档</title>

#useryes,#userno{

display:none;

}

</style>

function checkUser(userNode)

{

var name = userNode.value;

var namereg = new RegExp("^[a-z]{5}$");

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-z]{5}$/i;//加上参数i表示忽略大小写

//var namereg = new RegExp("^[a-z]{5}$");

var spanNode1 = byId("useryes");

var spanNode2 = byId("userno");

if(name.match(namereg))

{

spanNode1.style.display = "inline";

spanNode1.style.color = "green";

spanNode2.style.display = "none";

}

else

{

spanNode2.style.display = "inline";

spanNode2.style.color = "red";

spanNode1.style.display = "none";

}

function checkPsw(pswNode)

{

var pass = pswNode.value;

//var passreg = new RegExp("^\\d{5}$");

var passreg = /^\d{5}$/;

var spanNode = byId("pswspan");

if(pass.match(passreg))

spanNode.innerHTML = "密码正确".fontcolor('green');

else

spanNode.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');

}

else

{

spanNode.innerHTML = "邮件错误".fontcolor('green');

}

function checkForm()

{

//event.returnValue = false;

return false;

}

</script>

</head>

<body>

用户名称：<input type="text" name="user" οnblur="checkUser(this)"/>

<span id="useryes">用户名正确</span><span id="userno">用户名错误</span><br />

输入密码：<input type="text" name="psw" οnblur="checkPsw(this)" />

<br />

确认密码：<input type="text" name="repsw" /><br />

邮件地址：<input type="text" name="mail" οnblur="checkMail(this)" />

<br />

</form>

</body>

</html>********************************************************************

程序十七、

利用table td,table th{}组合选择其和关联选择器；完成如下注册表单事件！

在没有向表单项中输入内容时，每个表单项下面都有提示信息。

当每个表单项目输入的格式不正确，表单项外面显示红色边框，下面显示错误提示信息。

所有表单项都按照格式输入后，才可以单击“提交按钮”进行提交。

<html>*********************************************************************

<head>

<title>无标题文档</title>

table{

border:#0066FF 1px solid;

width:600px;

border-collapse:collapse;

}

table td,table th{

border:#0066FF 1px solid;

padding:10px;

}

table td{

background-color:#FFFF99;

}

table th{

background-color:#FF6600;

}

#respswspan{

margin-left:115px;

}

.erroinfo{

color:#FF0000;

display:none;

}

.focus{

border:#0099FF 2px solid;

}

.norm{

border:#999999 1px solid;

}

.error{

border:#999999 2px solid;

}

</style>

function inputColor(input)

{

input.className = "norm";

input.onfocus = function()

{

this.className = "focus";

}

window.onload = function()

{

with(document.forms[0])

{

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;

}

else

{

inputNode.className = "error";

divNode.style.display = "block";

}

return b;

}

//校验用户名,老是的，麻烦，已过期

function checkUserDemo(userNode)

{

var value = userNode.value;

var regex = /^\w{3,5}$/;

var divNode = document.getElementById("userdiv");

if(regex.test(value))

{

userNode.className = "norm";

divNode.style.display = "none";

}

else

{

userNode.className = "error";

divNode.style.display = "block";

}

//校验用户名

function checkUser(userNode)

{

var regex = /^\w{3,5}$/;

return check(userNode,regex,"userdiv");

}

//校验密码

function checkPsw(pswNode)

{

var regex = /^[a-z0-9]{3,5}$/i;

return check(pswNode,regex,"pswdiv");

}

//校验确认密码

function checkRepsw(repswNode)

{

var b=false;

var value1 = repswNode.value;

var value2 = document.getElementsByName("psw")[0].value;

var divNode = document.getElementById("repswdiv");

if(value1==value2)

{

repswNode.className = "norm";

divNode.style.display = "none";

b = true;

}

else

{

repswNode.className = "error";

divNode.style.display = "block";

}

return b;

}

//校验mail

function checkMail(mailNode)

{

var regex = /^\w+@\w+(\.\w+)+$/;

return check(mailNode,regex,"maildiv");

}

//校验表单

function checkForm(formNode)

{

//alert(formNode.user.value);

with(formNode)

{

if(checkUser(user) && checkPsw(psw) &&checkRepsw(repsw) && checkMail(mail))

event.returnValue = true;

else

event.returnValue = false;

}

</script>

</head>

<body>

<!--

1、定义页面：通过观察表单被表格所封装，表格有五行，但此表格没有列的概念。

将单元格中的数据通过div进行封装，以便操作。

2、定义样式。表格的样式、div的样式

3、动态效果

3.1在页面加载时，将所有的输入框默认的框线颜色以及定义时获取焦点的框线颜色。

3.2进行内容的校验。可以通过正则表达式完成，并通过框线的样式给用户提示。

通过对刚才用户名校验的分析，发现代码重复度很高，为了提高复用性，将不同的内容作为参数

传递，将相同的内容进行函数的封装。

-->

<table>

<tr>

</tr>

<tr>

<td>

<div class="erroinfo" id="userdiv">用户名错误，请按要求填写。</div>

<div>用户名必须是3-5位，由字母(a-z),数字(0-9),下划线(_)组成</div>

</td>

</tr>

<tr>

<td>

<div>

</div>

<div class="erroinfo" id="pswdiv">密码格式错误,请按规范输入</div>

<div class="erroinfo" id="repswdiv">两次密码输入不一致</div>

<div>密码必须是3-5位,由字母(a-z),数字(0-9)组成</div>

</td>

</tr>

<tr>

<td>

<div class="erroinfo" id="maildiv">邮箱地址错误,请按要求填写</div>

</td>

</tr>

<tr>

<th>

</th>

</tr>

</table>

</form>

</body>

</html>*********************************************************************

<a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！ ----------------------

详细请查看：<ahref="http://edu.csdn.net" target="blank">http://edu.csdn.net</a>