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延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 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中如何判断AJAX提交的数据
2012/02/05 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
jQuery实现冻结表格行和列
2015/04/29 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
python中子类继承父类的__init__方法实例
2016/12/15 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
先进事迹报告会感言
2014/01/24 职场文书
员工工作能力评语
2014/12/31 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
python中%格式表达式实例用法
2021/06/18 Python
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏