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文件缓存的代码
Apr 09 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
svg动画之动态描边效果
Feb 22 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
Vue router安装及使用方法解析
Dec 02 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版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
详解python polyscope库的安装和例程
2020/11/13 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
医学毕业生自荐信
2013/10/11 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
小学教师办公室制度
2014/02/03 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
2015年酒店工作总结
2015/04/28 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang