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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
jQuery each()方法的使用方法
Mar 18 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
Javascript玩转继承(二)
May 08 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
react中hook介绍以及使用教程
Dec 11 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 Javascript
vue实现登录功能
Dec 31 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
浅谈javascript的数据类型检测
2010/07/10 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
js控制input输入字符解析
2013/12/27 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python读取中文txt文本的方法
2018/04/12 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
语文教育专业应届生求职信
2013/11/23 职场文书
生产部岗位职责范文
2014/02/07 职场文书
岗位安全生产责任书
2014/07/28 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
一级电子管军用接收机测评
2022/04/05 无线电
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS