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

相关文章

  • 详解webpack4升级指南以及从webpack3.x迁移

    详解webpack4升级指南以及从webpack3.x迁移

    本篇文章主要介绍了详解webpack4升级指南以及从webpack3.x迁移,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 纯js实现手风琴效果代码

    纯js实现手风琴效果代码

    这篇文章主要为大家详细介绍了纯js实现手风琴效果代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 微信小程序实现云开发上传文件、图片功能

    微信小程序实现云开发上传文件、图片功能

    在使用小程序的过程中,在编辑个人资料时,通常会面临上传头像、上传背景图片的情况,而这个开发过程需要怎样实现呢?这篇文章主要给大家介绍了关于微信小程序实现云开发上传文件、图片功能的相关资料,需要的朋友可以参考下
    2022-12-12
  • JavaScript实现楼层效果

    JavaScript实现楼层效果

    这篇文章主要为大家详细介绍了JavaScript实现楼层效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • ElementUI 的 Tree 组件的基本使用实战教程

    ElementUI 的 Tree 组件的基本使用实战教程

    这篇文章主要介绍了ElementUI 的 Tree 组件的基本使用实战教程,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • 5种JavaScript脚本加载的方式

    5种JavaScript脚本加载的方式

    这篇文章主要为大家详细介绍了5种JavaScript脚本加载的方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • js操作二进制数据方法

    js操作二进制数据方法

    下面小编就为大家分享一篇js操作二进制数据方法,具有很好的参考价值,希望对的大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • js实现完美兼容各大浏览器的人民币大小写相互转换

    js实现完美兼容各大浏览器的人民币大小写相互转换

    在基于网页的打印输出或报表中,经常会牵扯到金额的大写,每次都打上去很麻烦,所以想法用一个JavaScript客户端脚本来实现自动转换,只需在需要显示大写金额的时候调用该JS函数,下面我们就来汇总下吧
    2015-10-10
  • Bootstrap中的Panel和Table全面解析

    Bootstrap中的Panel和Table全面解析

    这篇文章主要介绍了Bootstrap中的Panel和Table全面解析的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 用循环或if语句从json中取数据示例

    用循环或if语句从json中取数据示例

    倘若想将id和pid数据依次取出,就只能用循环,若想有选择性的输出时,需要添加if条件
    2014-08-08

最新评论