JS时间控制实现动态效果的实例讲解

2024-12-14 09:44:12

如下所示：

<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时间控制实现动态效果的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

JS实现日期时间动态显示的方法

本文实例讲述了JS实现日期时间动态显示的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>js日期时间动态显示</title> </head> <body> <div id='jnkc'></div> <script>setInterval("jnkc.innerHTML=new Date().toLocaleString
js实现动态显示时间效果

话不多说,请看代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>时间显示器</title> </head> <body> <div id="d"></div> <script type="text/javascript"> var nowT
纯js实现动态时间显示

本文实例为大家分享了js动态时间显示的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>js动态时间显示 </title> </head> <body id = "show"> <script> function run(){ var time = ne
纯JS实现动态时间显示代码

复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <script language="javascript">
js显示动态时间的方法详解

本文实例讲述了js显示动态时间的方法.分享给大家供大家参考,具体如下: Date对象的方法 Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统的时间和日期.要使用Date对象的方法,你就必须先创建一个Date对象的实体(Instance). Date 对象必须使用 Flash 5 或以后版本的播放器. Date 对象的方法并不是静态的,但是在使用时却可以应用于所指定的
JS时间控制实现动态效果的实例讲解

如下所示: <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(
js学习总结_选项卡封装(实例讲解)

这个插件对应的html的结构如下 <div class='box' id='tabFir'> <ul id='tabOptions'> <li class='select'>页卡一</li> <li>页卡二</li> <li>页卡三</li> </ul> <div class='select'> <div>1</div> <div>2</div&
JS数组操作中的经典算法实例讲解

冒泡排序 <script type="text/javascript"> var arr = [3,7,6,2,1,5]; 定义一个交换使用的中间变量 var temp = 0; for(i=0;i<arr.length;i++){ for(j=0;j<arr.length;j++){ 如果下一个元素小于当前元素 if(arr[j]>arr[j+1]){ 互换 temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = tem
js的函数的按值传递参数(实例讲解)

js的函数传参的方式是按值传递,正常情况下,改变函数参数的值,并不会对函数外部的变量造成影响.例如: 'use strict'; var list = [1, 2, 3]; list.forEach(function(item) { item ++; }); console.log(list); // [ 1, 2, 3 ] 这是因为js的函数在接收参数时,会生成一个副本变量,该副本变量等于参数的值,可以分析js这样运行的: 'use strict'; var list = [1, 2, 3];
js最简单的双向绑定实例讲解

把代码复制放到页面里面运行看一下效果就好了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="myinput" > <sc
vue.js与后台数据交互的实例讲解

第一步:引入js库: <script src="../js/common/vue.min.js"></script> <script src="../js/common/vue-resource.js"></script> 前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti
JS执行控制之节流模式实例分析

本文实例讲述了JS执行控制之节流模式.分享给大家供大家参考,具体如下: 节流模式:对重复的业务逻辑进行控制,执行最后一次操作,并取消其他操作,以提高性能. 重复的业务逻辑真的很让人讨厌的,但其中往往蕴含着可被优化的空间. 比如我们经常碰到的一种情况:当鼠标移进容器的时候,改变容器的颜色:当鼠标移出去的时候,恢复默认颜色. 但是有时候是用户不小心移进来的,或者是不小心移出去的,但是效果却消失了.这样用户的体验效果是非常不好的,这时候,我们就可以利用节流模式. 节流模式的核心思想是创造计时器,延迟程
JS操作iframe里的dom(实例讲解)

直接赋值如下代码测试即可明白: 1.html: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&l
JS如何获取地址栏的参数实例讲解

地址:http://127.0.0.1:8082/prosperleedir/index.html?id=6666&name=prosper#prosper Location{ assign:ƒ (), // 加载新的文档. hash:"#prosper", // 设置或返回从井号 (#) 开始的 URL(锚). host:"127.0.0.1:8082", // 设置或返回主机名和当前 URL 的端口号. hostname:"127.0.0.1&
js隐式转换的知识实例讲解

开胃菜 [] == ![] //true ==> "" == false 123 ^ [] //123 ==> 123 ^ 0 ~{} //-1 ==> ~0 {} >= {1,2} //true ==>因为大于等于的比较,不是相等的比较,所以[object Object] >=[object Object] [null] == "" //true ==> [""] == "" 值得注

JS时间控制实现动态效果的实例讲解

相关推荐

随机推荐