本节继续介绍在html页面中js的运用。
(1)数码时钟:(http://files.cnblogs.com/files/MenAngel/text05.zip)
<!DOCTYPE html> <html> <head lang="en"> <title>示例10.1</title> <script> function tostr(value){ if(value<10) return "0"+value; else return ""+value; } window.onload=function(){ var adiv=document.getElementById('div1'); var aimg=adiv.getElementsByTagName('img'); function ticky() { var adate=new Date(); var str=tostr(adate.getHours())+tostr(adate.getMinutes())+tostr(adate.getSeconds()); for (var i = 0; i < aimg.length; i++) { aimg[i].src = "http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_" + str[i] + ".png"; } } setInterval(ticky,1000); ticky(); } </script> </head> <body> <div id="div1"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/> <font size=5><b>:</b></font> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/> <font size=5><b>:</b></font> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_0.png"/> </div> </body> </html>
(2)延时提示框:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>示例10.2</title> <style> div{ float:left; margin:10px; } #div1{ width:50px; height:50px; background:red; } #div2{ width:200px; height:180px; background:#808080; display:none; } </style> <script> window.onload = function () { var aDiv1 = document.getElementById('div1'); var aDiv2 = document.getElementById('div2'); var timer = null; aDiv2.onmouseover = aDiv1.onmouseover = function () { clearTimeout(timer); aDiv2.style.display = 'block'; } aDiv2.onmouseout = aDiv1.onmouseout = function () { timer= setTimeout(function () { aDiv2.style.display = 'none';}, 500); } } </script> </head> <body> <div id="div1"> </div> <div id="div2"></div> </body> </html>
(3)无缝滚动(任意方向)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>示例10.3</title> <style> *{ margin: 0; padding: 0; } #suround{ margin-top:20px; } .Direct{ float:left; height: 200px; } #main_div{ width: 1200px; height: 200px; position: relative; background: red; overflow: hidden; } #main_div ul { position: absolute; left: 0px; top: 0px; } #main_div ul li { float: left; width: 300px; height:200px; list-style: none; } #main_div ul li img{ width: 300px; height:200px; } .D_img{ height:200px; width:200px; } .D_img:hover{ cursor:pointer; } </style> <script> window.onload = function () { var aDiv = document.getElementById('main_div'); var aUl = aDiv.getElementsByTagName('ul')[0]; var aLi = aUl.getElementsByTagName('li'); var timer = null; var speed = -2; aUl.innerHTML = aUl.innerHTML + aUl.innerHTML; aUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'; function move() { if (aUl.offsetLeft < -aUl.offsetWidth / 2) { aUl.style.left = '0'; } if (aUl.offsetLeft > 0) { aUl.style.left = -aUl.offsetWidth / 2 + 'px'; } aUl.style.left = aUl.offsetLeft +speed+ 'px'; } timer = setInterval(move, 30); aDiv.onmouseover = function () { clearInterval(timer); } aDiv.onmouseout = function () { timer = setInterval(move, 30); } document.getElementsByClassName('D_img')[0].onclick = function () { speed = -2; } document.getElementsByClassName('D_img')[1].onclick = function () { speed = 2; } } </script> </head> <body> <div id="suround"> <div class="Direct"> <img class="D_img" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_left.png" /> </div> <div id="main_div" class="Direct"> <ul> <li> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC1.jpg" /></li> <li> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC2.jpg" /></li> <li> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC3.jpg" /></li> <li> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858702/o_%E8%B5%AB%E6%9C%AC4.jpg" /></li> </ul> </div> <div class="Direct" > <img class="D_img" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_right.png" /> </div> </div> </body> </html>
(4)模拟邮箱中checkbox的全选,反选和不选:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>示例10.4</title> <script> function fanxuan(){ var mydv=document.getElementById('div2'); var mycb=mydv.getElementsByTagName('input'); for(var i=0;i<mycb.length;i++){ mycb[i].checked=(mycb[i].checked==true?false:true); } } function quanxuan(){ var mydv=document.getElementById('div2'); var mycb=mydv.getElementsByTagName('input'); for(var i=0;i<mycb.length;i++) { mycb[i].checked=true; } } function buxuan() { var mydv = document.getElementById('div2'); var mycb = mydv.getElementsByTagName('input'); for (var i = 0; i < mycb.length; i++) { mycb[i].checked = false; } } </script> </head> <body> <div id="div1"> <input type="button" value="全选" onclick="quanxuan()"/> <input type="button" value="不选" onclick="buxuan()"/> <input type="button" value="反选" onclick="fanxuan()"/> </div> <div id="div2"> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> </div> </body> </body> </html>
(5)在新的选项卡里打开页面:(http://files.cnblogs.com/files/MenAngel/text06.zip)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>示例10.5</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> div,table,tr,td,a{font-size:12px}; </style> <script language="JavaScript"> var x_open_path =""; //设置图标地址 </script> <script language="JavaScript" src="x_open.js"></script> </HEAD> <BODY> 演示: <a href="javascript:x_open('百度一下', 'http://www.baidu.com',800,800)">百度首页</a> - <a href="javascript:x_open('我的首页', 'https://home.cnblogs.com/u/MenAngel/',800,800)">我的首页</a> - <a href="javascript:x_open('管理后台', 'https://www.cnblogs.com/MenAngel/',800,800)">管理后台</a> </BODY> </HTML>