Javascript应用--实现倒计时按钮效果

最新推荐文章于 2024-01-24 15:24:22 发布
最新推荐文章于 2024-01-24 15:24:22 发布
阅读量81 收藏
点赞数
文章标签： javascript xhtml ViewUI
Code:
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
  5. <title>无标题文档</title>
  6. <scripttype="text/javascript">
  7. varcount=3;
  8. functionbutTime()
  9. {
  10. varbutNode=document.getElementById("butid");
  11. //alert(butNode.value);
  12. butNode.disabled=true;
  14. butNode.value="同("+count+")意";
  15. count--;
  16. if(count==-1)
  17. {
  18. butNode.value="同意";
  19. butNode.disabled=false;
  20. window.clearInterval(time);
  21. }
  22. }
  23. vartime;
  24. window.onload=function()
  25. {
  26. butTime();
  27. time=window.setInterval("butTime()",1000);
  28. }
  30. </script>
  31. </head>
  32. <body>
  33. <inputid="butid"type='button'value=""/>
  34. </body>
  35. </html>

iteye_6481
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
App启动页倒计时功能
04-23
App启动页倒计时功能，示例代码采用 RxJava + RxLifecycle + Data-Binding 模式编写。
实现按钮倒计时效果（js）
lwq1003的专栏
10-10 858
     按钮倒计时                                    var secs = 10;            var wait = secs * 1000;            var agreetext="同  意";            document.form1.Button1.value = agreetext+"(" + secs + ")
JS实现点击按钮显示倒计时
最新发布
m0_66403070的博客
01-24 1108
JS实现点击按钮显示倒计时
JS实现为控件添加倒计时功能
szd_happy的博客
07-04 2248
在有些报表需求中，需要为控件添加倒计时功能，限制到某一个时间点后能进行一项操作或不能进行某项操作，比如查询，导出功能等等，又需要人性化地显示还有多少时间，即倒计时功能
【JavaScript】分秒倒计时器
编程记录，亲测有效
11-19 3089
一、基本目标 在JavaScript设计一个分秒倒计时器，一旦时间完成使按钮变成不可点击状态 具体效果如下图，为了说明问题，调成每50毫秒也就是每0.05跳一次表， 真正使用的时候，把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可。 在时间用完之前，按钮还是可以点击的。 时间用完之
JQuery实现的按钮倒计时效果
11-24
在网页交互设计中，按钮倒计时效果是一个常见的功能，特别是在表单提交或者重要操作时，用来限制用户频繁点击或确保用户有足够时间阅读提示信息。JQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件...
javascript显示倒计时控制按钮的简单实现
11-24
本文将详细解析如何使用JavaScript实现一个简单的倒计时控制按钮，以"再次发送激活邮件"为例。 首先，我们看HTML部分： ```html <a><span id="sendAgain" onclick="sendEmail()">2.再次发送激活邮件</span></a> ```...
JQuery实现倒计时按钮具体方法
10-26
本文将详细解释如何使用JQuery来实现一个倒计时按钮。 首先，我们需要理解JQuery的基本用法。JQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画设计以及Ajax交互。在JQuery中，我们通常通过选择器...
JavaScript分秒倒计时器实现方法
12-09
创建一个JavaScript分秒倒计时器的目标是实现在网页上显示一个实时更新的倒计时，并在倒计时结束后执行某些功能，如使按钮变为不可点击状态。在实际应用中，倒计时器通常以1秒为单位更新，但在示例中为了演示效果，...
Javascript怎么做倒计时
wmeng13的博客
07-12 1491
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; 剩余：&lt;span i
JS实现倒计时效果
任性的wo的博客
08-08 478
1. 显示当前系统时间 当前系统时间 window.onload=function() { showTime(); } function checkTime(i) { if(i<10) { i="0"+i; } return i; } function showTime() { var myDate = n
javaScript实现倒计时功能
热门推荐
qq_65715980的博客
07-08 1万+
目录一、主要思路二、css样式三、html代码四、js内容五、完整代码展示六、效果展示1.通过内置时间函数实例化日期对象获取当前时间 new Date。2.因为时间无法减去时间，有可能生成负数，所以采用时间戳的方法得到毫秒数形式的剩余时间，然后再把剩余时间转换为天、时、分、秒格式。3.最后把所获得的内容赋值给定义的变量。主要为了内容在页面展示美观，稍微美化一下。 三、html代码 定义一个默认格式为JavaScript引入定义变量。 四、js内容 1.首先获取html里面的spans里的全部标签
简单的JS实现按钮触发倒计时功能
legends2012的专栏
11-23 986
var c = 3; var t; function timedCount() { document.getElementById('txt').value = c c = c - 1 if (c == 0) { alert("asdf");
Js中关于按钮倒计时显示（setTimeout 和 setInterval）
yicunyangguang的博客
02-24 4561
目标：实现一个按钮点击，同时按钮禁用并显示倒计时的js功能函数。 分析：首先要有一个按钮，绑定一个事件，这个事件功能就是定时改变按钮显示值，同时禁止按钮进行二次点击。 此功能函数需要使用js周期调用函数 setTimeout 或则setInterval，来定时改变显示值。 setTimeout 和 setInterval的区别是什么，又该如何选择呢？其实 setTimeout 和 setInterval 的最本质的区别是 触发 setTimeout 方法只执行一次，而触发 setInterval 方.
原生js点击按钮倒计时
24min的博客
05-21 1390
&lt;! DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title &gt;111&lt;/title&gt; &lt;style type ="text/css"&gt;&lt;/style&gt; &lt;script ty
js设置按钮倒计时
a3289780的博客
05-07 1652
下面是我在工作中遇到的一个问题，也成功的解决了，贴出来分享下，希望大家提出宝贵的建议。 问题提出： 为了防止传真发送接口的堵塞，程序要求传真发送按钮每过5分钟才能点击一次。即使关闭当前页面甚至浏览器，再重新打开，仍然能够判断，并做出读秒倒计时提示。 效果图： 问题解决： 首先，我们写个按钮状态更新的js函数 function update(num) { var se...
JS按钮倒计时
dunpaixia083的博客
08-20 625
JS实现按钮倒计时 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS按钮倒计时</title> <script> var countdown=5; function settime(v...
html倒计时自动按钮,js实现的倒计时按钮实例
weixin_28688385的博客
06-02 583
本文实例讲述了js实现的倒计时按钮。分享给大家供大家参考。具体分析如下：效果图如下：具体代码如下：var secs = 3;var wait = secs * 1000;var update = function(num,value){if (num == (wait/1000)){$("#rulesubmit").val("免费获取");}else{printnr = (wait/1000) -...
使用js函数实现按钮控制倒计时
Java_Long_Asus的博客
08-17 1106
1.设置控制倒计时的函数 function count(){ var count = 149;//倒计时开始的秒数 var countdown = setInterval(CountDown, 1000); //倒计时增量（1000为毫秒） function CountDown() { $("#sendPhoneCode").val("(" + count +...
JavaScript基础：表单验证与动态效果应用
5. **时钟特效、级联显示和CSS样式应用**：JavaScript结合CSS可以实现复杂的页面动画和布局效果，如计时器、下拉菜单等。 6. **页面元素动态创建**：JavaScript能够根据用户操作或特定条件动态生成或删除HTML元素，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值