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

 更新时间:2017年07月31日 07:52:02   投稿:jingxian  
下面小编就为大家带来一篇JS时间控制实现动态效果的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

如下所示:

<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时间控制实现动态效果的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 微信小程序 接入腾讯地图的两种写法

    微信小程序 接入腾讯地图的两种写法

    这篇文章主要介绍了微信小程序 接入腾讯地图的两种写法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • 微信小程序全局状态的深入讲解

    微信小程序全局状态的深入讲解

    这篇文章主要介绍了微信小程序全局状态的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • layui的table中显示图片方法

    layui的table中显示图片方法

    今天小编就为大家分享一篇layui的table中显示图片方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 谈谈target=_new和_blank的不同之处

    谈谈target=_new和_blank的不同之处

    这篇文章主要介绍了target="_new"和"_blank"的区别实例详解,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • JavaScript如何把两个数组对象合并过程解析

    JavaScript如何把两个数组对象合并过程解析

    这篇文章主要介绍了JavaScript如何把两个数组对象合并过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • js观察者模式的弹幕案例

    js观察者模式的弹幕案例

    这篇文章主要为大家详细介绍了js观察者模式的弹幕案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js数组转json并在后台对其解析具体实现

    js数组转json并在后台对其解析具体实现

    这篇文章主要介绍了js数组转json并在后台对其解析具体实现,有需要的朋友可以参考一下
    2013-11-11
  • 谈谈JavaScript中super(props)的重要性

    谈谈JavaScript中super(props)的重要性

    今天小编就为大家分享一篇关于谈谈JavaScript中super(props)的重要性,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • JavaScript 数组中最大最小值

    JavaScript 数组中最大最小值

    本文给大家汇总介绍的是获取JavaScript 数组中最大最小值的方法和示例,非常的详细和全面,希望对大家学习JavaScript能够有所帮助
    2016-06-06
  • 微信小程序自定义弹窗实现详解(可通用)

    微信小程序自定义弹窗实现详解(可通用)

    这篇文章主要介绍了微信小程序自定义弹窗实现详解(可通用),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07

最新评论