当前位置：Gxlcms > JavaScript > JS时间控制实现动态效果的实例讲解

JS时间控制实现动态效果的实例讲解

时间：2021-07-01 10:21:17 帮助过：28人阅读

如下所示：

<script>
    BOM  //Bowers Object Model  浏览器对象模型
  setTimeout()
//  延迟执行一次
  setInterval()
//  间隔执行
  var a = 300;
  window.setTimeout('abc(a)',3000);
//  自定义函数赋值
  function abc(i)
  {
    alert(i);
  }
  //setInterval('alert(123)',2000);
  var dh = document.getElementById("dh");
  //alert(dh.offsetLeft);
  function move() {
    dh.style.marginLeft = dh.offsetLeft + 1 + 'px';
  }
  var x = window.setInterval('move()', 20);
  var y = window.setInterval('move()', 500);
  function clear() {
    window.clearInterval(x);
  }
                  //清除间隔执行
  window.setTimeout("clear()",2500);
//             要执行的代码；间隔时间
window.setInterval('alert(123)',1000);
</script>
　　利用时间控制实现钟表的操作
<style>
      *{
        margin: 150px auto;
        width:500px; 
        height:500px;
      }
    
  </style>
  <body>
    <div>
      <span id="h"></span>
      <span id="m"></span>
      <span id="s"></span>
    </div>
    <script type="text/javascript">
      window.setInterval("time()",1000);
    　　　　自定义时间函数
      function time(){
　　　　　　　　日期时间函数调用
        var time = new Date();
        
        document.getElementById("h").innerText = time.getHours() +':';
        document.getElementById("m").innerText = time.getMinutes() +':';
        document.getElementById("s").innerText = time.getSeconds();
      }
</script>
    
    
  </body>

以上这篇JS时间控制实现动态效果的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

JS时间控制实现动态效果的实例讲解

人气教程排行