HTML&JS&DOM题目和代码

1.注册 HTML {  ( <html> <head> <title>注册</title> </head > <body> <form action="登录.htm" mothod="get"> <table> <tr> <td>用户名：</td> <td> <input type="text"> </td> </tr> <tr> <td>密码：</td> <td> <input type="password"> </td> </tr> <tr> <td>重复密码：</td> <td> <input type="password"> </td> </tr> <tr> <td>省份：</td> <td> <select> <option value="js" selected="selected">江苏省</option> <option value="bj">北京市</option> <option value="sh">上海市</option> <option value="gz">广州省</option> <option value="tw">台湾省</option> </select> </td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="sex" checked="checked" >男 <input type="radio" name="sex" >女 <input type="radio" name="sex" >保密 </td> </tr> <tr> <td>职业：</td> <td> <input type="radio" name="job" checked="checked" >学生 <input type="radio" name="job" >公司职员 <input type="radio" name="job" >其他 </td> </tr> <tr> <td>爱好：</td> <td> <input id="chk1" type="checkbox" value="ds" ><label for="chk1" accesskey="s">登山</label> <input id="chk2" type="checkbox" value="lq" ><label for="chk2" accesskey="s">篮球</label> <input id="chk3" type="checkbox" value="zq" ><label for="chk3" accesskey="s">足球</label> <input id="chk4" type="checkbox" value="ds" ><label for="chk4" accesskey="s">读书</label> <input id="chk5" type="checkbox" value="yy" ><label for="chk5" accesskey="s">游泳</label> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="提交"/> </td> </tr> </table> </form> <body> </html>

} 2.登录HTML {  <html> <head> <title>登录页面</title> </head> <body> <form action="123.htm" mothod="get"> <h3> 用户登录 </h3> <table> <tr> <td>用户名：</td> <td> <input type="text"> </td> </tr> <tr> <td>密码：</td> <td> <input type="password" size="21" > </td> </tr> <tr> <td> <input type="checkbox" size="21" checked="checked" value="pwd" > 记住密码 </td> </tr> <tr> <td>验证码：</td> <td> <input type="text"> </td> <td> <image src="123.png"></image> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="登录" > <input type="reset" value="重置" > </td> </tr> </table> </form> </body> </html> } 3.协议 {  ( <html> <head> <title>协议</title> </head > <body> <form action="注册.htm" mothod="get"> <table> <tr> <td> <textarea rows="20" cols="100">asdfasfd4125325687236587267856252asdfasfd4125325687236587267856252asdfasfd4125325687236587267856252asdfasfd4125325687236587267856252asdfasfd4125325687236587267856252asdfasfd4125325687236587267856252asdfasfd4125325687236587267856252asdfasfd4125325687236587267856252</textarea> </td> </tr> <tr> <td> <input type="checkbox" value="pwd" > 我已阅读以上协议 </td> </tr> <tr> <td> <input type="submit" value="我同意"> </td> </tr> </table> </form> <body> </html> } 4.表单练习 { <html> <head> <title> 歌曲列表 </title> </head> <body > <ui> <li>歌曲2</li> <li>歌曲3</li> <li>歌曲4</li> <li>歌曲5</li> <li>歌曲6</li> </ui> <ol type=A> <li>歌曲2</li> <li>歌曲3</li> <li>歌曲4</li> <li>歌曲5</li> <li>歌曲6</li> </ol> <table border="1px" width="300px" height="50px"> <tr> <th colspan="3"> 学生成绩表</th> </tr> <tr> <th>数学</th> <th>语文</th> <th>英语</th> </tr> <tr> <td>95</td> <td>98</td> <td>89</td> </tr> </table> <hr color="yellow" > <table border="1px" width="300px" height="50PX"> <tr> <th colspan="3"> 学生基本状况</th> </tr> <tr> <th>姓名</th> <th>性别</th> <th>专业</th> </tr> <tr> <td>刘备</td> <td>男</td> <td rowspan="3">计算机</td> </tr> <tr> <td>孙尚香</td> <td>女</td> </tr> <tr> <td>诸葛亮</td> <td>男</td> </tr> </table> </body> </html> } 5.表格美化 { <body> <h3> 注册页面</h3> <form action="06-table.html" method="get"> <table id="tb" border="1px" cellspacing="0px" cellpadding="5px"> <tr> <td class="right"> 用户名： </td> <td> <input class="cls" type="text" size="20" value="" /> </td> </tr> <tr> <td class="right"> <label for="txtPwd" accesskey="f"> 密码：</label> </td> <td> <input id="txtPwd" type="password" class="cls"> </td> </tr> <tr> <td class="right"> 确认密码： </td> <td> <input type="password" class="cls"> </td> </tr> <tr> <td class="right"> 性别： </td> <td> <input type="radio" name="sex" value="male" checked="checked">男 <input type="radio" name="sex" value="female">女 <input type="radio" name="sex" value="unknow">未知 </td> </tr> <tr> <td class="right"> 爱好： </td> <td> <input id="chk0" type="checkbox" value="cf" checked="checked">吃饭 <input id="chk1" type="checkbox" value="sj" checked="checked"><label for="chk1" accesskey="s">睡觉</label> <input type="checkbox" value="ddd" checked="checked">打豆豆 </td> </tr> <tr> <td class="right"> 地区： </td> <td> <select class="cls"> <option value="hb">河北省</option> <option value="hn">河南省</option> <option selected="selected">山东省</option> <option>四川省</option> </select> </td> </tr> <tr> <td class="right"> 备注： </td> <td> <textarea rows="15" cols="30">asdfasfd</textarea> </td> </tr> <tr> <td colspan="2" class="center"> <input type="submit" value="注册"> <input type="reset" value="重置"> </td> </tr> </table> </form> } 6.横向菜单 { <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #menu { list-style-type:none; } #menu li { width:80px; margin-left:10px; text-align:center; float:left; background-color:Gray; } .div { width:200px; height:200px; background-color:Red; margin-bottom:10px; float:left; margin-left:10px; } #d1 { width:650px; height:500px; background-color:Yellow; } </style> </head> <body> <ul id="menu"> <li> 文    学 </li> <li> 历    史 </li> <li> 程    序 </li> <li> 小    说 </li> <li> 成    人 </li> </ul> <br /> <br /> <div id="d1"> <div class="div"> </div> <div class="div"> </div> <div class="div"> </div> </div> <br style="clear:left" /> <p>ppp</p> </body> </html> } 7.DIV+CSS布局 { <head> <title></title> <style type="text/css"> * { margin:0px; padding:0px; } #wrap { width:90%; height:800px; background-color:blue; margin:0px auto; } #wrap #header { width:100%; height:150px; background-color:Yellow; } #wrap #main #nav { width:20%; height:500px; background-color:Black; float:left; } #wrap #main #content { width:80%; height:500px; background-color:Green; float:left; } #wrap #footer { height:150px; width:100%; background-color:Red; } </style> </head> <body> <div id="wrap"> <div id="header">123</div>

<div id="main"> <div id="nav">123</div> <div id="content">123</div> </div> <div style="clear:left"></div> <div id="footer">123</div> </div> </body> } 8.JS练习题 { (1)//求一个数组中的最大值。定义成函数。 var arr = [2, 6, 1, 43, 6, 9]; function getMax(arr) { var max = arr[0]; for (var i = 1; i < arr.length; i++) { if (max < arr[i]) { max = arr[i]; } } return max; } alert(getMax(arr)); (2)//将一个字符串数组输出为|分割的形式，比如“梅西|卡卡|郑大世”。不要使用JavaScript中的Join函数。arr1.join("|")将数组用分隔符连接成一个字符串。 function myJoin(arr, sep) { var str = arr[0]; //判断参数是否赋值 if (!sep) { sep = "," } for (var i = 1; i < arr.length; i++) { str += sep + arr[i] ; } return str; }

var arr = json.class1;

for (var i = 0; i < arr.length; i++) { alert(arr[i].name); } } 10.倒计时十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = “” ，让元素可用。disabled=disabled,为不可用)disabled=true; { <head> <title></title> <script type="text/javascript"> var count = 10; function setBtn() { var btn = document.getElementById("btn"); if (count > 0) { btn.value = "请仔细阅读协议(" + count + ")秒"; count--; } else { btn.value = "同意"; btn.disabled = false; clearInterval(timeId); } }

switch (oper) { case "+": document.getElementById("res").value = num1 + num2; break; case "-": document.getElementById("res").value = num1 - num2; break; case "*": document.getElementById("res").value = num1 * num2; break; case "/": document.getElementById("res").value = num1 / num2; break; default: alert("运算符输入错误"); break; } } </script> </head> <body> <input type="text" id="num1" /> <input type="text" id="oper" /> <input type="text" id="num2" /> = <input type="text" id="res" /> <input type="button" id="btn" value="计算" onclick="operation()" /> </body> </html> } 13.表格隔行变色（动态生成表格）点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色 { <!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> <title></title> <style type="text/css"> .trbg { background-color: Yellow; } </style> <script type="text/javascript"> window.onload = function () { document.getElementById("btn").onclick = function () { //创建Json对象 var sites = [{ "name": "百度", "src": "http://www.baidu.com" }, { "name": "谷歌", "src": "http://www.google.com" }, { "name": "优酷", "src": "http://www.youku.com" }, { "name": "猫扑", "src": "http://www.mop.com" }, { "name": "土豆", "src": "http://www.tudou.com" }, { "name": "人人", "src": "http://www.renren.com" } ]; //清空div document.getElementById("d1").innerHTML = "";

//内存中生成table对象 var table = document.createElement("table"); table.border = "1px"; table.width = "400px"; document.getElementById("d1").appendChild(table);

//循环数据 for (var i = 0; i < sites.length; i++) { //每一个Json对象 var site = sites[i];

//往table插入tr,-1代表往下生成。 var tr = table.insertRow(-1) //插入第一个td var td = tr.insertCell(-1); td.innerText = site.name; //插入第二个td td = tr.insertCell(-1); td.innerText = site.src; } //获得所有的tr var trs = document.getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { //是第二行的话，给加上className if (i % 2 == 1) { trs[i].className = "trbg"; } } } } </script> </head> <body> <input id="btn" type="button" value="创建" /> <div id="d1"> </div> </body> </html>

} 14.文本自动自增 { <head> <title></title> <script type="text/javascript"> var tld; function start() { var num = parseInt(txt.value); num++; txt.value = num; } tld = setInterval("start()", 1000); function stop() { clearInterval(tld); } function over() { txt.value = 0; } </script> </head> <body> <input type="text" name="txt" value="0" /><br /> <input type="button" value="开始" onclick="start()" /> <input type="button" value="暂停" onclick="stop()" /> <input type="button" value="结束" /> </body> </html> } 15.跑马灯 { <head> <title>我爱北京天安门</title> <script type="text/javascript"> var dir = "left"; setInterval(function () { //获取文档标题 var title = document.title; var first; var last if (dir == "left") { //获取第一个字符 first = title.substr(0, 1); //获取从第二个字符开始的所有字符 last = title.substr(1); } else if (dir == "right") { //获取最后一个字符之前的字符串 first = title.substr(0, title.length - 1); //获取最后一个字符 last = title.substr(title.length - 1, 1); } //交换位置，重新设标题 document.title = last + first; }, 500); function setDir(d) { dir = d; }

</script> </head> <body> <input type="button" value="向左" onclick="setDir('left')" /> <input type="button" value="向右" onclick="setDir('right')" /> </body> </html> } 16.添加版权信息 { head> <title></title> <script type="text/javascript"> //重新设置粘贴板的内容的时候。先等一小段时间setTimeout('addCopy()',20) function addCopy() { //获取粘贴板中的数据 var txt = clipboardData.getData("text"); //重新设置值 txt += "<br /> 来源：http://www.itcast.cn"; //把数据放回粘贴板 clipboardData.setData("text", txt); } </script> </head> <body oncopy="setTimeout('addCopy()',20)"> asdfasfdasfdasdfsafda 阿什顿发斯蒂芬<a href="10-前进后退.htm">10-前进后退.htm</a> </body> </html> } 17.图片游览器动态生成版实现鼠标在小图片区域时当前小图片边框高亮，并在下面显示大图片 { <!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> <title></title> <style type="text/css"> #d1 img { cursor: pointer; } .nonborder { border: 0px; } .border { border: solid 2px red; } </style> <script type="text/javascript"> window.onload = function () { var div = document.getElementById("d1"); var imgs = div.getElementsByTagName("img"); for (var i = 0; i < imgs.length; i++) { //给每个图片赋予当前id imgs[i].id = i + 1; imgs[i].onmouseover = function () { //把每一项的边框颜色还原 for (var i = 0; i < imgs.length; i++) { imgs[i].className = "nonborder"; } //当前项高亮 this.className = "border";

//获得当前鼠标选择项的id var index = this.id;

//配置大图片的src var src = "img/" + index + ".jpg"; document.getElementById("i1").src = src; } } } </script> </head> <body> <center> <div id="d1"> <img src="img/01.jpg" /> <img src="img/02.jpg" /> <img src="img/03.jpg" /> <img src="img/04.jpg" /> <img src="img/05.jpg" /> </div> <br /> <div> <img id="i1" src="" /> </div> </center> </body> </html>

} 18.评分控件鼠标移动时，前面和当前的星星的高亮。 { <!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> <title></title> <script type="text/javascript"> window.onload = function () { var rating = document.getElementById("rating"); var tds = rating.getElementsByTagName("td");

//给每个td起索引 for (var i = 0; i < tds.length; i++) { tds[i].id = i; tds[i].style.cursor = "pointer";

tds[i].onmouseover = function () { //当前id索引 var index = parseInt(this.id);

//当前和之前的td for (var i = 0; i <= index; i++) { tds[i].style.backgroundColor = "red"; } //之后的td for (var i = index + 1; i < tds.length; i++) { tds[i].style.backgroundColor = ""; } } } } </script> </head> <body> <table id="rating"> <tr> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> <td> ☆ </td> </tr> </table> </body> </html>

} 19.验证Email是否合法光标离开Email地址框的时候用正则表达式校验是否是合法的Email地址，如果不是的话Email地址框变红，并且注册按钮禁用，否则Email地址框颜色为白色，启用注册按钮 { <!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> <title></title> <script type="text/javascript"> window.onload = function () { document.getElementById("txt").onblur = function () { var reg = /[0-9a-zA-Z\._-]+@([0-9a-zA-Z-_]+\.[0-9a-zA-Z-_]+)+/; var txt = document.getElementById("txt").value; if (!reg.test(txt)) { var txt = document.getElementById("txt"); var btn = document.getElementById("btn"); txt.style.borderColor = "red"; btn.disabled = true; } } document.getElementById("txt").onfocus = function () { txt.style.borderColor = "white"; btn.disabled = false; } } </script> </head> <body> <table> <tr> <td> Email: </td> <td> <input type="text" id="txt" /> </td> </tr> <tr> <td> <input type="button" value="提交" id="btn" /> </td> </tr> </table> </body> </html>

} 20.动态生成n个文本框可以设定生成多个各文本框和设定一行可以放几个文本框。 { <!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> <title></title> <script type="text/javascript"> window.onload = function () { document.getElementById("btn").onclick = function () { var div = document.getElementById("d1"); div.innerHTML = ''; var num = document.getElementById("num").value; var count = parseInt(document.getElementById("count").value) * 200 + 50; //这里为什么div的宽度要设置成文本框的宽度*count然后加一点像素才起效。 div.style.width = count+"px"; for (var i = 0; i < parseInt(num); i++) { var txt = document.createElement("input"); txt.type = "text"; txt.value = i + 1; txt.style.width = "200px"; //设定文本框的宽度为200px div.appendChild(txt); } } } </script> </head> <body> <input type="text" id="num" />输入生成文本框数量<br /> <input type="text" id="count" />输入一行几个文本框<br /> <input type="button" id="btn" value="生成" /> <div id="d1"> </div> </body> </html>

} 22.无刷新评论 { <!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> <title></title> <script type="text/javascript"> window.onload = function () { document.getElementById("btn").onclick = function () { var name = document.getElementById("tName").value; var text = document.getElementById("tContent").value;

//判断是否有table var tb = document.getElementById("reply"); if (!tb) { tb = document.createElement("table"); tb.border = "1px"; tb.width = "400px"; tb.id = "reply"; document.getElementById("re").appendChild(tb); }

var tr = tb.insertRow(-1);

var td = tr.insertCell(-1); td.innerText = name;

td = tr.insertCell(-1); td.innerText = text; } } </script> </head> <body> 评论： <div id="re"> </div> <br /> 用户名：<input type="text" id="tName" /><br /> 内容：<textarea id="tContent" rows="15" cols="30"></textarea><br /> <input id="btn" type="button" value="发表" /> </body> </html>

} 23.相册v1 { <!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> <title></title> <style type="text/css"> #tooltips { border: solid 1px red; width: 100px; height: 100px; position: absolute; background-color: Gray; } #d1 { margin: 0px auto; width: 50%; } .nonborder { border: 0px; } .border { border: solid 3px red; } </style> <script type="text/javascript">

window.onload = function () { //1.创建json数据 var json = [{ "title": "美女1", "src": "images/1340613409722411.jpg", "girlname": "mm", "age": "21" }, { "title": "美女1", "src": "images/13406134129368172.jpg", "girlname": "mm1", "age": "23" }, { "title": "美女1", "src": "images/1340613416394217.jpg", "girlname": "mm2", "age": "18" }, { "title": "美女1", "src": "images/13406134199189221.jpg", "girlname": "mm3", "age": "24" }, { "title": "美女1", "src": "images/13406789712018077.jpg", "girlname": "mm4", "age": "20" } ];

//2.生成小图片 for (var i = 0; i < json.length; i++) { var item = json[i]; var image = document.createElement("img"); image.src = item.src; image.alt = item.title;

//3.设置自定义属性 image.setAttribute("girlname", item.girlname); image.setAttribute("age", item.age); image.setAttribute("id", i); //设置小图片id image.style.width = "100px"; image.style.height = "100px"; image.style.marginLeft = "10px"; //小图之间的间距 document.getElementById("d1").appendChild(image);

//4.给小图注册onmouseover事件 image.onmouseover = function () { clearTimeout(tmrId); //清楚计时器，照片不再播放 document.getElementById("d2").innerHTML = ""; var div1 = document.getElementById("d1"); var imgs = div1.getElementsByTagName("img"); for (var i = 0; i < imgs.length; i++) { imgs[i].className = "nonborder"; //清楚所有的小图片的高亮效果（播放留下的） } //设置可点击样式 this.style.cursor = "pointer";

//5.生成大图片 var img = document.createElement("img"); img.src = this.src; img.alt = this.alt; img.setAttribute("id", "myimg"); //设置边框高亮显示 this.className = "border"; document.getElementById("d2").appendChild(img); }

//6.给小图注册onmouseout事件 image.onmouseout = function () { showPic(); //回复播放效果 this.className = "nonborder"; //取消边框高亮显示 var div2 = document.getElementById("d2"); var img = document.getElementById("myimg"); if (img) { div2.removeChild(img); //删除DIV2里面的图片 } }

//7.给小图注册onclick事件 image.onclick = function () { clearTimeout(tmrId); //判断页面说那个有没有tooltips的div,如果有的话就删除 var div = document.getElementById("tooltips"); if (div) { document.getElementById("d1").removeChild(div); } //8.生成层，显示信息 div = document.createElement("div"); div.id = "tooltips"; //设置生成的DIV的位置,注意后面加px div.style.top = event.clientY + "px"; div.style.left = event.clientX + "px"; document.getElementById("d1").appendChild(div);

//9。关闭按钮 var btn = document.createElement("input"); btn.type = "button"; btn.value = "关闭"; btn.style.margin = "0px 53px"; div.appendChild(btn); //10.详细显示的信息 var p = document.createElement("p"); p.innerHTML = "  " + this.alt + "<br/>  姓名：" + this.getAttribute("girlname") + "<br/>  年龄：" + this.getAttribute("age"); div.appendChild(p);

btn.onclick = function () { //11.删除生成的DIV var div = document.getElementById("d1"); var tooltips = document.getElementById("tooltips"); if (tooltips) { div.removeChild(tooltips); } } } } showPic(); }

//12.这里设计图片播放的效果

} 24.登录层 { <!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> <title></title> <style type="text/css"> div { width:300px; height:200px; background-color:Red; display:none; position:absolute; margin:0px auto; } </style> <script type="text/javascript"> function showDiv() { var div = document.getElementById("d1");

div.style.display = "block"; //document.documentElement 根节点整个文档的高度和宽度 var x = (document.documentElement.clientWidth - div.clientWidth) / 2; var y = (document.documentElement.clientHeight - div.clientHeight) / 2;

div.style.left = x + "px"; div.style.top = y + "px"; }

function closeDiv() { var div = document.getElementById("d1"); div.style.display = "none"; } </script> </head> <body> <a href="javascript:void(0)" id="login" onclick="showDiv()">登陆</a>

} 25.设置透明度 { <!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> <title></title> <style type="text/css"> #d1 { width:200px; height:200px; background-color:Red; } </style> <script type="text/javascript">

function f1() { var div = document.getElementById("d1");

var num = div.style.filter.replace("alpha(opacity=","").replace(")",""); num = parseInt( num) - 10; div.style.filter = "alpha(opacity=" + num + ")"; //alert(div.style.filter);

//d1.style.opacity = "0.5"; } </script> </head> <body> <input type="button" value="click" onclick="f1()" /> <div id="d1" style="filter:alpha(opacity=100)"> </div> </body> </html>

} 26.跟着鼠标走的图片 { <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

document.onmousemove = function () {

var img = document.getElementById("i1");

img.style.position = "absolute";

//!!!!!!!!!!别忘了px img.style.left = event.clientX - 10 + "px"; img.style.top = event.clientY - 10 + "px";

} </script> </head> <body> <img id="i1" src="tianshi.gif" /> </body> </html>

} 27.评分控件v2 { <!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> <title></title> <script type="text/javascript"> window.onload = function () { var rating = document.getElementById("rating"); var tds = rating.getElementsByTagName("td");

for (var i = 0; i < tds.length; i++) { tds[i].setAttribute("index", i); tds[i].style.cursor = "pointer"; // tds[i].onmouseover = function () { var index = parseInt(this.getAttribute("index"));

for (var i = 0; i <= index; i++) { //childNodes //元素文本注释 ie中会忽略空白行，chome不会 //children //元素

//td 中的img var img = tds[i].children[0]; img.src = "images/starFill.jpg"; }

for (var i = index + 1; i < tds.length; i++) { var img = tds[i].children[0]; img.src = "images/starEmpty.jpg"; } } }

} </script> </head> <body> <table id="rating" border="0px" cellpadding="5" cellspacing="0"> <tr> <td> <img src="images/starEmpty.jpg" /> </td> <td> <img src="images/starEmpty.jpg" /> </td> <td> <img src="images/starEmpty.jpg" /> </td> <td> <img src="images/starEmpty.jpg" /> </td> <td> <img src="images/starEmpty.jpg" /> </td> </tr> </table> </body> </html>

} 28.倒影时钟 { <!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> <title></title> <style type="text/css"> #d1 { width: 200px; height: 100px; margin: 0px auto; } #time1 { position: absolute; } #time2 { filter: flipv() alpha(opacity=20); font-style: italic; position: absolute; top: 50px; } .time { font-size: 40pt; color: Red; } </style> <script type="text/javascript"> window.onload = function () { settime(); } function settime() { var time = new Date(); hours = time.getHours(); mins = time.getMinutes(); secs = time.getSeconds(); if (hours < 10) { hours = "0" + hours; } if (mins < 10) { mins = "0" + mins; } if (secs < 10) { secs = "0" + secs; } time1.innerHTML = hours + ":" + mins + ":" + secs; time2.innerHTML = hours + ":" + mins + ":" + secs; ctimer = setTimeout('settime()', 960); } </script> </head> <body> <div id="d1"> <div id="time1" class="time"> </div> <div id="time2" class="time"> </div> </div> </body> </html>

} 29.图片渐渐出现 { <!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> <title></title> </head> <body> <img src="images/13406789712018077.jpg" border="5" id="image1" style="visibility: hidden; filter: revealTrans(Duration=4.0, Transition=23);"> <script for="window" event="onLoad" language="vbscript"> image1.filters.item(0).apply() image1.filters.item(0).transition = 12 image1.Style.visibility = "" image1.filters(0).play(2.0) </script> </body> </html>

} 30.省市选择 { <!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> <title></title> <script type="text/javascript"> var json = [{ "江苏省": ["南京市", "苏州市", "扬州市"] }, { "河北省": ["邯郸市", "邢台市", "石家庄市"] }, { "浙江省": ["杭州市", "温州市", "金华市"] } ]; window.onload = function () { //加载所有省 getProvince(); //加载市 getCity(); } //加载所有的省 function getProvince() { for (var i = 0; i < json.length; i++) { for (var key in json[i]) { var option = document.createElement("option"); option.innerText = key; option.value = key; pro.appendChild(option); } } } //加载当前省所有市 function getCity() { var pro = document.getElementById("pro"); var city = document.getElementById("city"); //清空上一次加载的所有市 while (city.firstChild) { city.removeChild(city.firstChild); } //当前省 for (var i = 0; i < json.length; i++) { for (var key in json[i]) { //当前省的市 if (pro.value == key) { var citys = json[i][key]; //遍历citys for (var i = 0; i < citys.length; i++) { var option = document.createElement("option"); option.innerText = citys[i]; option.value = citys[i]; city.appendChild(option); } } } }

} </script> </head> <body> <select id="pro" onchange="getCity()"> </select> <br /> <select id="city"> </select> </body> </html>

} 31.密码强度 { <!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> <title></title> <script type="text/javascript"> window.onload = function () { var txt = document.getElementById("txtPwd"); var tb = document.getElementById("tb"); var tds = tb.getElementsByTagName("td"); //td里的背景颜色都还原成灰色 for (var i = 0; i < tds.length; i++) { tds[i].backgroundColor = "gray"; } //onkeyup 键盘弹起字符已经到文本框，可以获得value值 txt.onkeyup = function () { var tb = document.getElementById("tb"); var tds = tb.getElementsByTagName("td");

//按下键盘时初始化所有的td为灰色 for (var i = 0; i < tds.length; i++) { tds[i].style.backgroundColor = "gray"; } //获取密码强度 var level = getLevel(this.value); if (level == 0 || level == 1) { //弱密码 tds[0].style.backgroundColor = "red";

} else if (level == 2) { //中密码 tds[0].style.backgroundColor = "red"; tds[1].style.backgroundColor = "red";

} else if (level == 3) { //强密码 tds[0].style.backgroundColor = "red"; tds[1].style.backgroundColor = "red"; tds[2].style.backgroundColor = "red"; } } } //判断密码强度 function getLevel(txt) { var num = 0; //判断txt中是否有数字 var reg = /\d+/; if (reg.test(txt)) { num++; } //是否包含字母 var reg = /[a-z]+/i; if (reg.test(txt)) { num++; } //是否包含特殊符号 var reg = /[^0-9a-zA-Z]+/; if (reg.test(txt)) { num++; } //如果密码长度小于6 强度-1 if (txt.length < 6) { num--; } return num; } </script> </head> <body> <table border="1px" width="400px"> <tr> <td> 用户名： </td> <td> <input type="text" /> </td> </tr> <tr> <td> 密码： </td> <td> <input id="txtPwd" type="text" />  <table id="tb" width="40px;"> <tr> <td> 弱 </td> <td> 中 </td> <td> 强 </td> </tr> </table> </td> </tr> <tr> <td colspan="2"> <input type="button" name="name" value="注册" /> </td> </tr> </table> </body> </html>

} 32.只能输入数字 { <!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> <title></title> <script type="text/javascript"> window.onload = function () { var txt = document.getElementById("txt"); txt.onkeydown = function () { if (event.keyCode >= 48 && event.keyCode <= 57) {

} else { return false; } } } </script> </head> <body> <input type="text" id="txt" /> </body> </html>

} 33.全选反选 { <!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> <title></title> <script type="text/javascript"> window.onload = function () { var chkAll = document.getElementById("chkAll"); //点击全选 chkAll.onclick = function () { var chks = document.getElementsByName("hobby"); for (var i = 0; i < chks.length; i++) { chks[i].checked = this.checked; } }

//给所有子的checkbox注册单机事件 var chks = document.getElementsByName("hobby"); for (var i = 0; i < chks.length; i++) { //!!!!! chks[i].onclick = singleCheck; }

//反选 var btn = document.getElementById("btn"); btn.onclick = function () { var chks = document.getElementsByName("hobby"); for (var i = 0; i < chks.length; i++) { //把原来的状态取反 chks[i].checked = !chks[i].checked; }

//根据子的checkbox判断父的checkbox的状态 singleCheck(); } }

function singleCheck() { var chks = document.getElementsByName("hobby"); //假设所有子的checkbox都被选中 var isCheckAll = true;

for (var i = 0; i < chks.length; i++) { //判断每一个子的checkbox是否被选中 if (!chks[i].checked) { isCheckAll = false; break; } } //isCheckAll 所有子的checkbox是否都被选中 var chkAll = document.getElementById("chkAll"); chkAll.checked = isCheckAll; } </script> </head> <body> <input id="chkAll" type="checkbox" />全选 <input id="btn" type="button" value="反选" /> <br /> <input type="checkbox" name="hobby" />吃饭 <input type="checkbox" name="hobby" />睡觉 <input type="checkbox" name="hobby" />打豆豆 </body> </html>

} 34.权限选择 { <!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> <title></title> <script type="text/javascript"> function moveSeleted(all,sel) { var selOptions = all.getElementsByTagName("option"); for (var i = selOptions.length - 1; i >= 0; i--) { if (selOptions[i].selected) { selOptions[i].selected = false; //追加。把元素放到容器最后 //sel.appendChild(selOptions[i]);

//把new元素，插入到firstChild 之前 sel.insertBefore(selOptions[i], sel.firstChild); } } } </script> </head> <body> <select size="5" id="all" multiple="multiple"> <option>查找</option> <option>添加</option> <option>编辑</option> <option>删除</option> </select> <input type="button" value=">" onclick="moveSeleted(document.getElementById('all'),document.getElementById('sel'))" /> <input type="button" value="<" onclick="moveSeleted(document.getElementById('sel'),document.getElementById('all'))" /> <input type="button" value=">>" /> <input type="button" value="<<" /> <select size="5" id="sel" multiple="multiple"> </select> </body> </html>

} 35.二级菜单 { <!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> <title></title> <style type="text/css"> * { font-size:13px; margin:0px; padding:0px; } #menu { margin-left:200px; margin-top:100px; } #menu>ul>li { width:80px; list-style-type:none; float:left; background-color:Yellow; margin-left:10px; text-align:center; cursor:pointer; } #menu ul ul { list-style-type:none; background-color:Gray; } .hide { display:none; } .show { display:block; } </style> <script type="text/javascript"> window.onload = function () { //窗体加载的时候把所有子菜单隐藏

//父级ul var parent = document.getElementById("parent"); //子菜单对应的ul var uls = parent.getElementsByTagName("ul"); for (var i = 0; i < uls.length; i++) { uls[i].className = "hide"; }

//给父菜单的li注册事件 var lists = parent.children; for (var i = 0; i < lists.length; i++) { lists[i].onmouseover = function () { //当前父菜单对应的子菜单 var ul = this.children[0]; ul.className = "show"; }

lists[i].onmouseout = function () { //当前父菜单对应的子菜单 var ul = this.children[0]; ul.className = "hide"; } } } </script> </head> <body> <div id="menu"> <ul id="parent"> <li> 父级菜单一 <ul> <li> 子菜单一 </li> <li> 子菜单二 </li> <li> 子菜单三 </li> </ul> </li> <li> 父级菜单二 <ul> <li> 子菜单一 </li> <li> 子菜单二 </li> <li> 子菜单三 </li> </ul> </li> <li> 父级菜单三 <ul> <li> 子菜单一 </li> <li> 子菜单二 </li> <li> 子菜单三 </li> </ul> </li> <li> 父级菜单四 <ul> <li> 子菜单一 </li> <li> 子菜单二 </li> <li> 子菜单三 </li> </ul> </li> <li> 父级菜单五 <ul> <li> 子菜单一 </li> <li> 子菜单二 </li> <li> 子菜单三 </li> </ul> </li> </ul> </div> </body> </html>

} 36.tabcontrol { <!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> <title></title> <style type="text/css"> #qqTab { width:500px; height:200px; border:solid 1px gray; } #qqTab ul { margin:0px; height:20px; background-color:#f1f1f1; border-bottom:solid 1px gray; } #qqTab ul li { list-style-type:none; float:left; width:80px; cursor:pointer; text-align:center; } .activeTab { background-color:red; border-bottom-width:0px; } </style> <script type="text/javascript"> window.onload = function () { var div = document.getElementById("qqTab"); var lists = div.getElementsByTagName("li");

for (var i = 0; i < lists.length; i++) { lists[i].onmouseover = function () { //让当前li高亮 for (var i = 0; i < lists.length; i++) { lists[i].className = ""; } this.className = "activeTab";

//让当前对应的div显示。其它div隐藏 var tabs = document.getElementById("tabs"); var divs = tabs.children; for (var i = 0; i < divs.length; i++) { divs[i].style.display = "none"; }

var id = this.name; var d = document.getElementById(id); d.style.display = "block"; } } } </script> </head> <body> <div id="qqTab"> <ul> <li name="tabPage1" class="activeTab">国内新闻</li> <li name="tabPage2">国际新闻</li> <li name="tabPage3">火星新闻</li> </ul> <div id="tabs"> <div id="tabPage1" > 国内新闻111111111111 </div> <div id="tabPage2" style="display:none"> 国际新闻2222222222222 </div> <div id="tabPage3" style="display:none"> 火星新闻333333333333 </div> </div> </div> </body> </html>

} 37.QQ好友菜单 { <!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> <title></title> <style type="text/css"> * { font-size: 18px; margin: 0px; padding: 0px; } #menu { margin-left: 200px; margin-top: 100px; } #menu > ul > li { width: 80px; list-style-type: none; background-color: Yellow; margin-top: 10px; text-align: center; cursor: pointer; } #menu ul ul { list-style-type: none; background-color: Gray; } .hide { display: none; } .show { display: block; } </style> <script type="text/javascript"> var seed = 0; window.onload = function () { //窗体加载时把所有子菜单隐藏 //父ul var parent = document.getElementById("parent"); //子菜单对应ul var uls = parent.getElementsByTagName("ul"); for (var i = 0; i < uls.length; i++) { uls[i].className = "hide"; }

//给父菜单的li注册事件 var lists = parent.children; for (var i = 0; i < lists.length; i++) { lists[i].onclick = function () { //当前父菜单对应的子菜单 var ul = this.children[0]; if (seed == 0) { ul.className = "show"; seed++; } else { ul.className = "hide"; seed--; } }

} } </script> </head> <body> <div id="menu"> <ul id="parent"> <li>好友 <ul> <li>好友1</li> <li>好友1</li> <li>好友1</li> </ul> </li> <li>陌生人 <ul> <li>陌生人1</li> <li>陌生人2</li> <li>陌生人3</li> </ul> </li> <li>黑名单 <ul> <li>黑名单1</li> <li>黑名单2</li> <li>黑名单3</li> </ul> </li> </ul> </div> </body> </html>

}

posted @ 2012-09-06 22:26 zxp19880910 阅读(373) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

zxp19880910

HTML&JS&DOM题目和代码

公告