JS.简单的计时器

最新推荐文章于 2021-06-15 17:59:06 发布
最新推荐文章于 2021-06-15 17:59:06 发布
阅读量400 收藏
点赞数
分类专栏： js / jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinamummy_29/article/details/26601777
版权 
<!DOCTYPE html>
<html>
  <head>
    <title>计时器</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  	<script>
  		var x = 0;
  		var t;
		function startTime(){
			document.getElementById("txt").value=x;
			x=x+1;
			t = setTimeout("startTime()",1000);
		}
		function stopTime(){
			clearTimeout(t);
		}
	</script>
  </head>
  
  <body>
	
	<div>
		<input type="text" id="txt" />
	</div>
	<input id="start" name="start" type="button" value="startTime" οnclick="startTime()"/>
	<input id="stop" name="stop" type="button" value="stopTime" οnclick="stopTime()"/>

  </body>
</html>

我是一只好羊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现简易计时器
12-29
自己实现的简单的倒计时器，发现网上关于这方面的代码有是有，但写的界面都不堪入目，乱七八糟的。我自己用js手写了一个分享给大家，界面比较简洁，后面会再写一个比较酷炫的。如果没有积分还想下载的小伙伴可以加qq邮箱联系我，我发给你：1343121616@qq.com
videojs-timer:video.js的简单计时器
05-22
Video.js计时器video.js的计时器插件。入门将插件脚本添加到页面后，即可将其与任何视频配合使用： < script src =" video.js " > </ script >< script src =" videojs-timer.js " > </ script...
JavaScript实现简单计时器
an_gentle_killer的博客
06-15 1148
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> </head> <style> .bigDiv{ margin: 50px auto; width: 200px; height: 200px; backgrou.
js之制作网页计时器
ama7790的博客
04-08 328
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页计时器</title> </head> <body> <input type="button" id="b...
简单的JS计时器
weixin_39027946的博客
05-05 142
思路： 1.获取开始时间戳。 2.每秒获取当前时间戳。 3.两者相减，算出时分秒。 var timestamp = Date.parse(new Date()); setInterval(()=>{ let timeSpan = Date.parse(new Date())-timestamp; ...
js简单计时器
a_li_li的博客
04-06 607
js代码：      setInterval(function(){             var oBox = document.getElementById('div');             oBox.innerHTML = new Date();         },1000); html代码：
js编写简单的计时器功能
01-19
本文实例为大家分享了js计时器功能的编写代码，供大家参考，具体内容如下 小白一枚，如有代码不规范或者写错的地方，希望得大神指导 代码： <!DOCTYPE html> <html> <head> <meta charset=utf-...
javascript实现计时器的简单方法
10-22
主要为大家详细介绍了javascript实现计时器的简单方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript设计简单的秒表计时器
10-23
在JavaScript中，设计一个简单的秒表计时器涉及到的核心概念有事件监听、DOM操作、定时器（setTimeout和clearTimeout）以及动态更新界面。下面我们将详细探讨这些知识点。 1. **事件监听**： 在这个秒表计时器中，...
JS简易计时器
weixin_44907289的博客
04-01 558
JS简易计时器 涉及功能： 动态加载下拉框 ES6拼接html字符串 定时器的设置和清除 str.padStart(targetLength [, padString]) 问题总结： JS字符串拼接：传统拼接用“ ” 和 + 来拼接；ES6用 ` (反引号，不是单引号！！！）标识，用${ }引用变量，{ }可引用表达式（对象，数组，函数等）。 padStart(2, ‘0’) 字符串补全长...
javascript实现的简单计时器
12-10
最近写了很多微信端的互动小游戏，比如下雪花 限时点击 赢取奖品，限时拼图，限时答题等，都是些限时‘游戏’（其实算不上游戏，顶多算是具有一点娱乐性的小互动而已） 上面出现了4个限时，对，没错，这里记录的就是最近写的 ‘计时器’ … 恩 ， 计时器 就一个setInterval 或 setTimeout 即可实现 ，代码不会超过十行！ 但是不防抱着没事找事的心态，来写个能复用的计时器 1.能倒计时 也能顺计时 2.复位、暂停、停止，启动功能 //计时器 window.timer = (function(){ function mod(opt){ //可配置参数 都带有默认值
javascript实现计时器
01-05
js实现计时器，只需要将设定的开始时间修改为你需要的开始时间就可以使用，制作个人网站，纪念重要日期非常实用。
js实现秒表计时器
10-15
主要为大家详细介绍了js实现秒表计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js 简单计时器
小耳朵晨晨
11-17 185
html: <div id="timer">00:00:00</div> <button id="btn">停止计时</button> js <script> let timer = document.querySelector('#timer') let h=0,m=0,s=0,flag=1, clearTime = null function startTime(){
js 计时器简单实现
书思的博客
08-07 524
js 计时器简单实现 <span id="span-time" style="font-size: 48px; font-weight: bold;">00:00</span> var timeCount = 0； var examTimer = setInterval(function () { timeCount++; if (timeCount % 15 =...
JavaScript 简易的秒表计时器
Mark
09-06 749
实现一个简易的秒表计时器，要求点击开始按钮进行计时，点击停止按钮暂停即使，再次点击开始按钮会继续计时。 最近面试第二次遇到这个题了，第一次是快手的一面面试题，当时面试官让我用 Vue 写，磕磕绊绊写出来了，面试完也没想仔细看看代码优化一下，结果今天招商银行的笔试又遇到这道题了，所以决定好好整理一下。 <input id="counter" type="text" readonly> <button onclick="start()">开始</button> <
JavaScript实现简易计时器
qq_40919128的博客
08-09 1899
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;   &lt;meta charset="UTF-8"&gt;   &lt;title&gt;计时器&lt;/title&gt;   &lt;script&gt;     var hour=0;//时      var minute
js实现简单计时器
liangfrank的博客
01-27 1840
//手机号正确后可以点击发送验证码 $(".js-getCode").click(function(){ if( i == 2){ //使用ajax把手机号发到后端,调用短信接口,前端同时开始计时 //换成计时器,指针换成默认 $(this).css("cursor", "default");
vue.js计时器定时触发接口，展示消息提示框
最新发布
05-12
你可以使用Vue.js中的定时器setInterval()方法来实现定时触发接口，然后根据接口返回的消息展示相应的提示框。 以下是一个简单的示例： ``` <template> <div> <button @click="startTimer">开始计时</button> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: '', timer: null } }, methods: { startTimer() { this.timer = setInterval(() => { // 调用接口获取消息 axios.get('/api/getMessage') .then(response => { this.message = response.data.message // 展示消息提示框 this.$message({ message: this.message, type: 'success' }) }) .catch(error => { console.log(error) }) }, 5000) // 每5秒触发一次接口 } }, beforeDestroy() { clearInterval(this.timer) } } </script> ``` 在上面的示例中，我们使用了Vue.js的计时器setInterval()方法来每隔5秒触发一次接口，获取消息并展示提示框。同时，在组件销毁前我们使用clearInterval()方法清除了计时器，避免内存泄漏问题。提示框的展示我们使用了Element UI组件库中的$message方法。你可以根据自己的需要进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值