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 animate 动画效果使用说明
Nov 04 Javascript
jQuery 插件开发指南
Nov 14 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
详解JavaScript作用域和作用域链
Mar 19 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设计模式 Strategy(策略模式)
2011/06/26 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
从零开始搭建一个react项目开发
2018/02/09 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
小程序中手机号识别的示例
2020/12/14 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python脚本实现集群检测和管理功能
2015/03/06 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
python机器人行走步数问题的解决
2018/01/29 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
Python 元类实例解析
2018/04/04 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
C#面试题问题集
2016/04/02 面试题
团组织关系介绍信
2014/01/12 职场文书
军训自我鉴定200字
2014/02/13 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android