简单的时钟及优化

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script>
  7.         function toDou(n){ //补零操作
  8.             if (n<10){
  9.                 return "0"+n;
  10.             }
  11.             else {
  12.                 return ""+n; //使他永远为一个字符串 不会受到‘+’号影响
  13.             }
  14.         }
  15.         window.onload=function () {
  16.             var oImg = document.getElementsByTagName('img');
  17.             function tick() { //定义一个tick方法是为了防止刷新时出现全为0的情况
  18.                 var oDate = new Date();
  19.                 var str = toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
  20.                 for (var i = 0;i<oImg.length;i++){
  21.                     oImg[i].src = 'number_img/'+str.charAt(i)+'.png';  //charAt()可以获取字符串上某一位上的东西，提高兼容性
  22.                 }
  23.             }setInterval(tick,1000); //使时间动起来
  24.             tick(); //在onload外调用 可以防止刷新归零
  25.         }
  26.     </script>
  27. </head>
  28. <body style="font-size: 100px">
  29. <img src="number_img/0.png">
  30. <img src="number_img/0.png">
  31. :
  32. <img src="number_img/0.png">
  33. <img src="number_img/0.png">
  34. :
  35. <img src="number_img/0.png">
  36. <img src="number_img/0.png">
  37. </body>
  38. </html>

延时提示框

合并代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div{
  8.             float: left;
  9.             margin: 10px;
  10.         }
  11.         #div1{
  12.             width: 50px;
  13.             height: 50px;
  14.             background-color: red;
  15.         }
  16.         #div2{
  17.             width: 250px;
  18.             height: 180px;
  19.             background-color: dimgray;
  20.             display: none;
  21.         }
  22.     </style>
  23.     <script>
  24.         window.onload=function () {
  25.             var oDiv1 = document.getElementById('div1');
  26.             var oDiv2 = document.getElementById('div2');
  27.             var timer = null;
  30. //------------------------------未合并代码------------------------------------
  31.             oDiv2.onmouseover = oDiv1.onmouseover = function () {  //当鼠标放在小方块上的时候
  32.                 clearTimeout(timer);            //计时器关闭
  33.                 oDiv2.style.display = 'block';  //大方块显示
  34.             };
  35.             oDiv2.onmouseout = oDiv1.onmouseout = function () { //当鼠标移出小方块的时候
  36.                 timer = setTimeout(function () { //定时器启动 500毫秒时 发生事件
  37.                     oDiv2.style.display='none';// 大方块消失
  38.                 },500);
  39.             };
  40.             oDiv2.onmouseover = function () {//当鼠标放在大方块上的时候
  41.                 clearTimeout(timer); //计时器关闭
  42.             };
  43.             oDiv2.onmouseout = function () {//当鼠标移出大方块的时候
  44.                 timer = setTimeout(function () { //定时器启动 500毫秒时 发生事件
  45.                     oDiv2.style.display='none'; //大方块消失
  46.                 },500);
  47.             }
  48.         }
  52. //------------------------------合并代码----------------------------------------
  53.         oDiv2.onmouseout = oDiv1.onmouseout = function () { 
  54.             timer = setTimeout(function () { 
  55.                 oDiv2.style.display='none';
  56.             },500);
  57.         };
  58.         oDiv2.onmouseover = oDiv1.onmouseover = function () {  
  59.             clearTimeout(timer);            
  60.             oDiv2.style.display = 'block';  
  61.         };
  62.     </script>
  63. </head>
  64. <body>
  65. <div id="div1"></div>
  66. <div id="div2"></div>
  67. </body>
  68. </html>