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 相关文章推荐
javascript 鼠标滚轮事件
Apr 09 Javascript
jquery 获取json数据实现代码
Apr 27 Javascript
javascript常用方法总结
May 14 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 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 Smarty date_format [格式化时间日期]
2010/03/15 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
JavaScript 参考教程
2006/12/29 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
纯JS前端实现分页代码
2016/06/21 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
vuex实现购物车功能
2020/06/28 Javascript
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
python查看微信好友是否删除自己
2016/12/19 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
党员四风问题对照检查材料
2014/09/27 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
实习单位推荐信
2015/03/27 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
《藏戏》教学反思
2016/02/23 职场文书
人力资源部工作计划
2019/05/14 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis