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


Posted in Javascript onJuly 31, 2017

如下所示:

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

Javascript 相关文章推荐
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 #Javascript
深入理解Vue transition源码分析
Jul 30 #Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 #Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 #Javascript
webpack配置sass模块的加载的方法
Jul 30 #Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 #Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 #Javascript
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
php下实现折线图效果的代码
2007/04/28 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
列表内容的选择
2006/06/30 Javascript
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
神路信息Java面试题目
2013/03/31 面试题
jQuery treeview树形结构应用
2021/03/24 jQuery
仓库主管的岗位职责
2013/12/04 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
授权委托书
2014/07/31 职场文书
励志演讲稿200字
2014/08/21 职场文书
医德考评自我评价
2014/09/14 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
检讨书怎么写
2015/01/23 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL