1、显示当前时间:
<!doctype> <html> <head> <meta charset='utf-8'> <script type='text/javascript'> function showtime(){ var now_time = new date(); //创建时间对象的实例 var hours = now_time.gethours(); //获得当前小时数 var minutes = now_time.getminutes(); //获得当前分钟数 var seconds = now_time.getseconds(); //获得当前秒数 var timer = "" + ((hours > 12) ? hours - 12 : hours); timer += ((minutes < 10) ? ":0" : ":") + minutes; timer += ((seconds < 10) ? ":0" : ":") + seconds; timer += " " + ((hours > 12) ? "pm" : "am"); document.getElementById("aa").text = timer; settimeout('showtime()', 1000); } </script> </head> <body onload="showtime()"> <div id="aa"></div> </body> </html>
2、当鼠标经过图像时图像的震动效果:
<!doctype> <html> <head> <meta charset='utf-8'> <script type='text/javascript'> var rector = 3, stopit = 0, a = 1; function init(which){ stopit = 0; zhend = which; zhend.style.left = 0; zhend.style.top = 0; } function rattleimage(which){ if((!document.all && !document.getElementById) || stopit = 1) return; if(a == 1){ zhend.style.top = parseInt(zhend.style.top) + rector; } else if(a == 2){ zhend.style.left = parseInt(zhend.style.left) + rector; } else if(a == 3){ zhend.style.top = parseInt(zhend.style.top) - rector; } else if(a == 4){ zhend.style.left = parseInt(zhend.style.left) - rector; } else { zhend.style.left = parseInt(zhend.style.left) - rector; } if(a < 4) a++; else a = 1; settimeout('rattleimage()', 50); } function stoprattle(which){ stopit = 1; which.style.left = 0; which.style.left = 0; } </script> </head> <body> <img src="test.png" class="zhendimage" onMouseover="init(this);rattleimage()" onmoouseout="stoprattle(this)" /> </body> </html>
3、自由切换图像:
<!doctype> <html> <head> <meta charset='utf-8'> <script type='text/javascript'> var img = new array(3); var nums = 0; if(document.images){ for(i = 1; i <= 3; i ++){ img[i] = new image(); img[i].src = 'images/00' + i + '.png'; } } function fort(){ nums ++; document.images[0].src = img[nums].src; if(nums == 3) nums = 0; } function slide(){ setInterval('fort()', 1000); } </script> </head> <body onload="slide()"> </body> </html>