前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Javascript实现计数器,定时警告和停止

Javascript实现计数器,定时警告和停止

作者头像
别先生
发布于 2017-12-29 10:24:44
发布于 2017-12-29 10:24:44
92200
代码可运行
举报
文章被收录于专栏:别先生别先生
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 <html>
 2 <head>
 3 <meta charset="utf-8">
 4 <title>定时警告</title>
 5 </head>
 6 <body> 
 7     <!--定时警告的问题-->
 8     <h1>定时警告的问题</h1>
 9     <input type="button" value="定时警告" onclick="setTimeMsg()"/>
10     <script language="javascript">
11         function setTimeMsg(){
12             setTimeout('alert("hello world!!!")',3000);//3s
13         }
14     </script>
15     <hr>
16     <!--计数器-->
17     <h1>计数器</h1>
18     <input type="button" value="开始计时" onclick="startTime()"/>
19     <input type="text" id="num"/><br>
20     <input type="button" value="结束计时" onclick="stopTime()"/>
21     
22     <script language="javascript">
23         var i=0;
24         var t;
25         function startTime(){
26             document.getElementById("num").value=i;
27             i=i+1;
28             t=setTimeout("startTime()",10);//1s
29         }
30         
31         function stopTime(){
32             clearTimeout(t);
33         }
34     </script>
35     
36 </body>
37 </html>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 1 <html>
 2 <head>
 3 <meta charset="utf-8">
 4 <title>定时警告</title>
 5 </head>
 6 <body onload="startTime()"> 
 7     <h1>秒表<div id="time"></div></h1>
 8     <script language="javascript">
 9         function startTime(){
10             var date=new Date();
11             var year=date.getFullYear();
12             var month=date.getMonth()+1;
13             var day=date.getDate();
14             var hour=date.getHours();
15             var minute=date.getMinutes();
16             var second=date.getSeconds();
17             //var str=year+"年"+month+"月"+day+"日"+hour+":"+minute+":"+second;
18             var str=hour+":"+minute+":"+second;
19 
20             document.getElementById("time").innerHTML=str;
21             setTimeout("startTime()",1000);
22         }
23     </script>
24 </body>
25 </html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-09-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript 定时器 setTimeout、setInterval
定时器在javascript中的作用 1、制作动画 2、异步操作 3、函数缓冲与节流 定时器类型及语法 示例代码如下: /* 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器 */ var time1 = setTimeout(myalert,2000); var time2 = setInterval(
Devops海洋的渔夫
2019/05/30
9860
js倒计时,秒倒计时,天倒计时
距某某开幕式还有 [<script language="JavaScript" type="text/javascript">djs()</script>] 天
用户3055976
2018/09/12
11.5K0
JavaScript原生秒表、计时器
可以开始、暂停、清除。 效果图: 下面贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl
晓晨
2018/06/22
1.3K0
js倒计时代码最简单的(js倒计时10秒代码)
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/127705.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/25
10.4K0
HTML+JS动态获取当前时间
window.requestAnimationFrame()方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画,通常与 setTimeout() 方法一起使用
C you again 的博客
2020/09/15
10.9K0
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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS实现倒
PHP开发工程师
2021/05/07
5.1K0
E005Web学习笔记-JavaScript(三):BOM
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
訾博ZiBo
2025/01/06
750
Javascript中String对象的的简单学习
第十一课 String对象介绍 1:属性     在javascript中可以用单引号,或者双引号括起来的一个字符当作     一个字符对象的实例,所以可以在某个字符串后再加上.去调用String  
别先生
2017/12/29
1.2K0
Javascript中String对象的的简单学习
javascript入门操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" con
闵开慧
2018/03/30
6390
HTML 表白网页
还在为不知道怎么表白而发愁吗?这里给你最新最好的一手表白的作品,给TA一个浪漫的惊喜吧!
办公魔盒
2019/07/22
21.9K2
HTML 表白网页
JavaScript基本入门教程
                必须以字母或下划线开头,中间可以是数字、字符或下划线
itlemon
2020/04/03
4.1K0
JS之浏览器对象BOM
DOM Window 代表窗体 DOM History 历史记录 DOM Location 浏览器导航 重点:window、history、location ,最重要的是window对象 1.window对象 Window 对象表示浏览器中打开的窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象 window.frames 返回窗口中所有命名的框架 parent是父窗口(如果窗口是顶级窗口,
Java帮帮
2018/03/19
2.9K0
JS之浏览器对象BOM
JavaScript语法学习(一文带你学会JavaScript)
注:语言只是工具,都是为了帮助我们更好地实现具体场景中的流程。JavaScript作为前端的脚本语言,非常容易简单上手。本博客较为简练地描述了其基本功能,并没有书写很详细。有C语言基础的同学(很多和C语言的语法相似)看起来非常易懂。
全栈程序员站长
2022/10/02
6930
JavaScript语法学习(一文带你学会JavaScript)
javascript入门笔记7-计时器
该文介绍了JavaScript中常用的计时器,包括setTimeout、setInterval和clearTimeout。每种计时器都有其独特的用法和功能。在文章中还提供了两个示例,一个是使用setTimeout实现的无穷循环计数器,另一个是使用setInterval和clearTimeout实现的取消计时器。
方志朋
2017/12/29
1.2K3
JAVA
//跳转 <% response.sendRedirect("index.html"); %> out.println("<script>alert('注册失败!');location.href='zhuce.html';</script>");//windows.href  //top //String int转换 int inttype = Integer.parseInt(type); String no=String.valueOf(aa); //获取当前时间 <% String date = n
一朵灼灼华
2022/08/05
1810
用JavaScript制作页面特效
setTimeout和setInterval两者区别:setTimeout是定时程序,在什么时间做什么事情,setInterval是表示间隔一定时间反复执行某操作。
全栈程序员站长
2022/09/06
1.7K0
用JavaScript制作页面特效
前端技术前沿8
实现倒计时(天数、时、分、秒) parseInt() 函数可解析一个字符串,并返回一个整数。 <body onload="leftTimer()"> <h2>剩余时间:</h2> <div id="timer"></div> </body> <script language="javascript" type="text/javascript"> function leftTimer(year,month,day,hour,minute,second){ var leftTime =
达达前端
2019/07/03
5.8K0
前端技术前沿8
html & CSS & JavaScript的学习
一、HTML 1. 概念: 是最基础的网页开发语言 * Hyper Text Markup Language 超文本标记语言 * 超文本: * 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。 * 标记语言: * 由标签构成的语言。<标签名称> 如 html,xml * 标记语言不是编程语言 2. 快速入门: * 语法: 1. html文档后缀名为.html或者 .htm 2. 标签分为:
Rochester
2020/09/01
6K0
JavaScript入门——简单代码实例
JavaScript,也称ECMAScript,是一种基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言,同时也是一种广泛用于客户端Web开发的脚本语言。
里克贝斯
2021/05/21
5230
JavaScript入门——简单代码实例
03 . 前端之JavaScipt
语法: splice(index,howmany,item1,.....,itemX)
iginkgo18
2020/09/27
1.5K0
03 . 前端之JavaScipt
相关推荐
JavaScript 定时器 setTimeout、setInterval
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文