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 Firefox3.5中操作select的问题
Jul 10 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
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 nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python字符串替换实例分析
2015/05/11 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
python 多个参数不为空校验方法
2019/02/14 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
python实现与redis交互操作详解
2020/04/21 Python
公司营业员的工作总结自我评价
2013/10/05 职场文书
毕业自荐书
2013/12/09 职场文书
高二物理教学反思
2014/02/08 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
初中语文教师研修日志
2015/11/13 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书