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 Array对象入门分析
Oct 30 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
JavaScript一元正号运算符示例代码
Jun 30 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中session退出登陆问题
2014/02/27 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
重定向实现代码
2006/11/20 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Python中的urllib模块使用详解
2015/07/07 Python
Python get获取页面cookie代码实例
2018/09/12 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
Python编写打字训练小程序
2019/09/26 Python
python输出pdf文档的实例
2020/02/13 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
香港礼品网站:GiftU eshop
2017/09/01 全球购物
2013年入党人员的自我鉴定
2013/10/25 职场文书
幼儿教师工作感言
2014/02/14 职场文书
鼓舞士气的口号
2014/06/16 职场文书
思想品德评语大全
2014/12/31 职场文书
公司感谢信范文
2015/01/22 职场文书
高中班长竞选稿
2015/11/20 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs