用setTimeout实现毫秒级动态时间显示

最新推荐文章于 2022-09-24 21:05:24 发布
最新推荐文章于 2022-09-24 21:05:24 发布
阅读量896 收藏 2
点赞数
分类专栏： html/css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yunlang2012/article/details/21652559
版权 
<!--版权所有：烟台大学2012级王洋-->
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Demo</title>
<script type="text/javascript">
function openClock()
{
	var obj = document.getElementById("Time");
	var s = new Date();
	obj.innerHTML = s.getHours()+":"+s.getMinutes()+":"+s.getSeconds()+":"+s.getMilliseconds();
	ID = setTimeout("openClock()",1);
}
</script>
<style type="text/css">
body{ background-color:#fff}
p{ color:#0066CC}
#title{font-size:50px; text-align:center; font-family:"Courier New", Courier, monospace; font-weight:bold}
#Time{ font-size:150px; text-align:left color:#0033FF;margin-left:300px;margin-top:10px;position:relative;}</style>
</head>

<body>
<form action="" name="form1">
<input type="button" value="点击显示时间" οnclick="openClock();" /><input type="button" value="点击暂停时间" οnclick="clearTimeout(ID);" />
</form>
<p id="title">Time by time</p><hr style="box-shadow:0px 0px 4px #000"/>
<p id = "Time"></p>
</body>
</html>

显示效果如下


yunlang2012
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解小程序毫秒级倒计时（适用于拼团秒杀功能）
10-17
在本文中，我们将深入探讨如何在微信小程序中实现毫秒级的倒计时功能，这种功能通常用于拼团秒杀活动，为用户提供实时的倒计时体验。倒计时的实现涉及到JavaScript的时间处理和定时器的使用。 首先，我们需要理解...
动态时钟
荒的博客
04-17 454
样式代码如下： 动态时钟 var id; function start(){ id = setInterval(function(){ var date = new Date(); var time = date.toLocaleTimeString(); var span = do
js 动态显示时间（setTimeout）
写博客只为学习
04-11 1015
// 全局变量 var timeoutId ; //开始执行 timeoutId = setTimeout(showTime,1000); function showTime(){ //清除定时器 clearTimeout(timeoutId); date = new Date(); var year = date.getFu
数字时钟setInterval()与setTimeout()
wangyining070205的博客
03-05 718
学习JavaScript经常会看到setInterval()与setTimeout()的区别，setInterval()会执行多次，setTimeout()只执行一次。最近看到一个动态显示时间，即数字时钟的例子，可以清楚地看到两者的区别。 1.使用setInterval() <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>显示当前时间</title> &
首页使用定时器setTimeout（setInterval）展示实时时间以及清除定时器问题
agua001的博客
12-02 884
1、需求：在首页展示实时时间点儿，离开首页清除定时器，刚开始的做法： 父组件： home.vue <page-head ref="pageHead" /> activated() { this.$nextTick(() => { this.$refs.pageHead.startTime(); }) }, 子组件 pageHead.vue <div class="weather"> <span>{{ timeDate }}</span&gt
2021-04-20
m0_57477154的博客
04-20 544
Error:编译.wxss文件错误，错误信息如上，可在控制台查看更详细信息。 求大神，新人加入 控制台内容：【violation】‘settimeout’ handler took 66ms 无报错 网络解决方案：openvendor（）删除文件 没有用，打开后还是会在，删除不了，求解求解啊？ ...
jquery鼠标悬停动态显示按钮效果
06-15
"jquery鼠标悬停动态显示按钮效果"这个主题，正是关于如何利用jQuery来实现一个当鼠标悬停时，按钮会动态显示的功能。下面将详细解释这一技术的实现原理和步骤。 首先，我们需要理解jQuery的基本概念。jQuery是一个...
jQuery实现的精确到毫秒的倒计时特效源码.zip
11-18
为了实现毫秒级的精度，开发者需要确保每次更新时都考虑到系统时间和JavaScript引擎的执行延迟。由于JavaScript是单线程的，setInterval可能不会严格按照指定的时间间隔执行，因此需要额外的调整以保持精确性。这...
JavaScript实现实时更新系统时间的实例代码
12-03
总结一下，JavaScript实现实时更新系统时间的关键在于使用Date对象获取时间信息，将其格式化为字符串，并通过定时器`setTimeout`定期更新页面上的显示。这种功能在网页中非常常见，例如显示实时倒计时、在线时长或者...
PHP精确到毫秒秒杀倒计时实例详解
12-20
为了确保毫秒级的精度，将PHP传来的剩余时间乘以1000转换为毫秒。 ```javascript var runtimes = 0; function GetRTime() { var lefttime = $lefttime; ?> * 1000 - runtimes * 1000; if (lefttime >= 0) { ...
网页制作中使用规范的HTML代码的几点
09-28
许多网站设计者最常犯的错误便是当其网页能够在IE下正常显示便认为其代码正确无误，甚至常看到有人在抱怨其网站排名不理想，到其网站简单看一下便可发现HTML代码中充斥各种各样的错误，在那样的代码基础上无论付出多少努力去优化网站结果都可能是付诸流水的啊！
详解setTimeout()
热门推荐
Moments
01-30 3万+
前言：看了这篇文章，1.注意setTimeout引用的是全部变量还是局部变量了，当直接调用外部函数方法时，实际上函数内部的变量已经变成全局。2.提醒我防止出错的，用匿名函数不容易出错。3.setTimeout最快执行时间是4毫秒。4.使用setTimeout的函数会比当前队列的函数慢执行，在他们的后面。5.setTimeout中的定时器并不是准确的时间，实际中它需要在执行完前面的函数后才定时执行。 你还可以查阅关于setTimeout的相关介绍 JavaScript提供定时执行代码的功能，叫做定时器（tim
前端setTimeout和setInterval定时器
qq_19891197的博客
09-24 1092
【代码】前端setTimeout和setInterval定时器。
settimeout默认时间_违规长时间运行的JavaScript任务需要<N>ms
weixin_39582708的博客
12-10 2750
来自：http://voidcn.com/article/p-zgijaywv-bte.html[Violation] Forced reflow while executing JavaScript took 45ms最近，我收到了这样的警告，这是我第一次得到它：[Violation] Long running JavaScript task took 234ms [Violation] For...
android显示二维毫秒,Android 悬浮窗显示毫秒级时间
weixin_33158453的博客
05-25 1557
Android 悬浮窗显示毫秒级时间Android 悬浮窗显示毫秒级时间。运行效果如下：1.新建工程”FloatWindowDemo2”,工程如下：2. “MainAcitivity.java”package com.example.liliangk.floatwindowdemo2;import android.content.Intent;import android.os.Bundle;im...
vue.js中settimeout遇到的问题（时间参数短效果不稳定）以及解决办法
love07070707的博客
04-12 1万+
先看效果图，这是弹窗效果，要求就是弹窗出现和消失时候不是很突兀，要有过渡效果。 首先看弹窗出现的实现思路，先加一个beforeActive类，再加一个active类。我们看审查元素，一开始display：none； 在beforeActive中display：block；只是background: transparent;然后在一定时间后再加上active类。问题就来了，在打开弹窗代码...
(转)setTimeout延时0毫秒的作用
weixin_30564901的博客
11-15 387
setTimeout延时0毫秒的作用 Posted on 2008-07-11 22:32xieex阅读(290)评论(4)编辑收藏网摘所属分类:HTML/JavaScript/CSS/... 经常看到setTimeout延时0ms的javascript代码，感到很迷惑，难道延时0ms和不延时不是一个道理吗？后来通过查资料以及实验得出以下两个作用，可能还有作用我...
真正的精确到毫秒级的动态秒表
chenjl1031的专栏
12-25 7061
转载请标明出处。用多媒体计数器做的真正的动态秒表。演示窗体下载地址  http://download.csdn.net/source/318216我选择了多媒体计数器！运行一分钟误差十几毫秒，调用自定义的函数TimeLabel转换时间，付出了代价，花了些时间。 理论上，高精度频率计数器最精确，毕竟API   QueryPerformanceFrequency,QueryPerformanc
用settimeout实现setinterval
最新发布
06-28
### 回答1： 可以在 setTimeout 函数内部递归调用它自己，以实现 setInterval 的效果。代码示例如下： ``` function setIntervalCustom(callback, interval) { setTimeout(function () { callback(); setIntervalCustom(callback, interval); }, interval); } ``` ### 回答2： setInterval和setTimeout都是JavaScript的定时器，都可以用于周期性地调用一个函数来执行某些操作。它们的差别在于setInterval是每隔一段时间就调用一次函数，而setTimeout是在一定时间之后才调用一次函数。但是，我们可以使用setTimeout来模拟setInterval的效果。 步骤如下： 1. 定义一个全局变量intervalId，用来存储定时器的id，初始化为null。 2. 定义一个函数，例如fn，用来执行我们想要周期性执行的操作。 3. 在fn函数的末尾，调用setTimeout函数来设置下一次fn函数的执行时间。可以设置一个常量来表示每隔多长时间执行一次，例如interval = 1000。 4. 在setTimeout函数的第一个参数中，调用fn函数自身，并且使用bind方法把本次调用的this指向fn函数的上下文，这样可以保留fn函数自身的作用域和状态。 5. 将setTimeout函数的返回值赋值给intervalId变量，这样我们就可以在后面的操作中取消定时器。 6. 最后，在需要取消定时器的时候，调用clearTimeout方法，把intervalId作为参数传进去即可。 一个完整的示例代码如下： ``` let intervalId; function fn() { console.log('Hello world'); intervalId = setTimeout(fn.bind(this), 1000); } intervalId = setTimeout(fn.bind(this), 1000); // 取消定时器 clearTimeout(intervalId); ``` 这段代码中，我们定义了一个函数fn，用来向控制台输出一段消息。在fn函数的末尾，我们使用setTimeout函数设置下一次fn函数的执行时间，并且将fn函数自身作为第一个参数，使用bind方法把本次调用的this指向fn函数的上下文。在外部，我们在setTimeout函数中调用fn函数，设置执行时间为1000毫秒，把返回值赋值给intervalId变量。这样，fn函数就会每隔一秒钟执行一次了。最后，我们使用clearTimeout函数取消定时器，向intervalId传入上一次定时器的id即可。 ### 回答3： 在JavaScript中，setInterval与setTimeout都是常使的定时器函数，它们都能用来定期执行某个函数，但是有细微的差别。setInterval方法会每隔指定时间就执行一次特定的代码，而setTimeout方法仅执行一次，在延迟指定时间后执行特定的代码。然而，我们也可以使用setTimeout方法来实现setInterval的效果。 使用setTimeout函数实现setInterval的原理是，将setTimeout函数封装在一个循环中，每次setTimeout函数调用结束后，再次调用setTimeout函数来不断运行这个封装的函数，从而实现类似setInterval的效果。因此，实现setTimeout函数来模拟setInterval的代码如下： ```javascript function setMyInterval(func, delay) { var id = setTimeout(function run() { func(); id = setTimeout(run, delay); }, delay); return id; } ``` 在setMyInterval函数中，我们调用了setTimeout函数，并在setTimeout函数的回调函数中，首先调用了func()函数来执行特定的代码，然后在函数末尾调用了setTimeout(run, delay)函数，这个函数再次调用了setTimeout函数来不断进行循环调用，从而实现了类似setInterval的效果。 接下来，我们可以使用这个函数来实现类似setInterval的效果： ```javascript function print() { console.log("Hello, world!"); } setMyInterval(print, 2000); ``` 在上面的例子中，我们定义了一个print函数，其功能是每2秒输出一次"Hello, world!"。然后，我们调用了setMyInterval函数，并将print函数和2000毫秒作为参数传递给该函数。这样，就相当于每隔1秒就会输出一次"Hello, world!"。 总结：通过使用setTimeout函数来封装一个循环调用，我们可以很容易地用JavaScript实现setInterval的效果。这样的使用还可以提高定时器函数的性能，避免多个定时器函数相互干扰，从而达到更好的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值