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 前的按键判断代码
Mar 19 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
JavaScript canvas实现文字时钟
Jan 10 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
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
常用PHP框架功能对照表
2014/10/23 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python学习必备知识汇总
2017/09/08 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
Python 函数返回值的示例代码
2019/03/11 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
浅析使用Python搭建http服务器
2019/10/27 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
大一学生的职业生涯规划书范文
2014/01/19 职场文书
教育学习自我评价
2014/02/03 职场文书
运动会稿件50字
2014/02/17 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers