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正确获取元素样式详解
Aug 07 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
php中给js数组赋值方法
Mar 10 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
js密码强度检测
Jan 07 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
JS猜数字游戏实例讲解
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
apache rewrite_module模块使用教程
2008/01/10 PHP
php防止sql注入代码实例
2013/12/18 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
js模拟类继承小例子
2010/07/17 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
常用jQuery代码分享
2015/07/14 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python subprocess模块学习总结
2014/03/13 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
python ddt实现数据驱动
2018/03/14 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
上海中网科技笔试题
2012/02/19 面试题
医院总经理职责
2013/12/26 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
卫生系统先进事迹
2014/05/13 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android