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 相关文章推荐
javascript函数重载解决方案分享
Feb 19 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
vue实现购物车的监听
Apr 20 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 源代码压缩小工具
2009/12/22 PHP
解析php中反射的应用
2013/06/18 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Python基于有道实现英汉字典功能
2015/07/25 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
django用户登录验证的完整示例代码
2019/07/21 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
Python通过字典映射函数实现switch
2020/11/06 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
Linux如何压缩可执行文件
2013/10/21 面试题
教师师德教育的自我评价
2013/10/31 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
出国留学自荐信模板
2015/03/06 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
趣味运动会口号
2015/12/24 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
在js中修改html body的样式
2021/11/11 Javascript