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 相关文章推荐
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 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 Stream_*系列函数
2010/08/01 PHP
PHP使用递归生成文章树
2015/04/21 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
深入解析Python编程中JSON模块的使用
2015/10/15 Python
pandas数据集的端到端处理
2019/02/18 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
台湾良兴购物网:EcLife
2019/12/01 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
行政专员岗位职责
2014/01/02 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
十佳教师事迹材料
2014/01/11 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
中学生班主任评语
2014/01/30 职场文书
八年级美术教学反思
2014/02/02 职场文书
高中生职业规划范文
2014/03/09 职场文书
合作意向书模板
2014/03/31 职场文书
奶茶店创业计划书
2014/08/14 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS