JavaScript 实现按钮倒计时注册效果

例1 一些免费获取验证码效果

 代码如下 复制代码

<input type="button" id="btn" value="免费获取验证码" />
<script type="text/javascript">
var wait=60;
function time(o) {
  if (wait == 0) {
   o.removeAttribute("disabled");   
   o.value="免费获取验证码";
   wait = 60;
  } else {
   o.setAttribute("disabled", true);
   o.value="重新发送(" + wait + ")";
   wait--;
   setTimeout(function() {
    time(o)
   },
   1000)
  }
 }
document.getElementById("btn").onclick=function(){time(this);}
</script>

例2

 代码如下 复制代码

常见的注册看协义的效果
<script language="javascript">
<!--
var wait_time = 8; //设置秒数(单位秒)
var secs_time = 0;
for(var i=1;i<=wait_time;i++)
{
window.setTimeout("sTimer("+i+")",i*1000);
}
function sTimer(num)
{
if(num==wait_time)
{
document.getElementById("reg_btn").value=" 同意注册 ";
document.getElementById("reg_btn").disabled=false;
}
else
{
secs_time=wait_time-num;
document.getElementById("reg_btn").value="请先阅读服务条款 ("+secs_time+")";
}
}
//-->
</script>

html代码

 

<div style="width:350px; text-align:center;">
<form name="regForm" method="post" action="">
<input type="submit" value="请先阅读服务条款 (0)" disabled="disabled" id="reg_btn">
<input id="BtnClose" type="button" value=" 我不同意 " onclick="window.close();">
</form>
</div>

活动即将开始的读秒效果

 代码如下 复制代码

//刷新DIV代码

function fresh(){

 ++times;

 //var begintime=new Date();

 var begintime=new Date(Date.parse(beginTime));

 var endtime=new Date(Date.parse(endTime));

 var leftsecond=parseInt((endtime.getTime()-begintime.getTime())/1000);

 leftsecond-=times;

 d=parseInt(leftsecond/3600/24);

 h=parseInt((leftsecond/3600)%24);

 m=parseInt((leftsecond/60)%60);

 s=parseInt(leftsecond%60);

 rushPurchaseStr='还有'+d+'天'+h+'小时'+m+'分'+s+'秒 开始抢购!' ;

 $("#rushPurchase").html(rushPurchaseStr);

 if(leftsecond<=0){

  rushPurchaseStr='抢购正在进行中...';

  $("#rushPurchase").html(rushPurchaseStr);

  clearInterval(sh);

 }

}
时间： 2024-11-08 22:41:26

JavaScript 实现按钮倒计时注册效果的相关文章

javascript为按钮注册回车事件（设置默认按钮）的方法_javascript技巧

本文实例讲述了javascript为按钮注册回车事件(设置默认按钮)的方法.分享给大家供大家参考.具体如下: 首先不得不说,在JS方面,自己真的是个不折不扣的菜鸟.对于JS以及一些JS框架如JQuery等JS框架,自己也只是处在简单应用的阶段,当然自己也在不断的学习当中,希望将来能跟大家分享更多JS方面的心得.今天先来点开胃的,说一下如何设置一个默认按钮,就是不管焦点在不在按钮上,只要按下回车,就等于触发了按钮的单击事件. 代码非常简单,要完成这个功能,只需几行代码: //为keyListene

javascript为按钮注册回车事件（设置默认按钮）的方法

  这篇文章主要介绍了javascript为按钮注册回车事件(设置默认按钮)的方法,可实现按下回车键触发按钮按下的效果,非常简单实用,需要的朋友可以参考下 首先不得不说,在JS方面,自己真的是个不折不扣的菜鸟.对于JS以及一些JS框架如JQuery等JS框架,自己也只是处在简单应用的阶段,当然自己也在不断的学习当中,希望将来能跟大家分享更多JS方面的心得.今天先来点开胃的,说一下如何设置一个默认按钮,就是不管焦点在不在按钮上,只要按下回车,就等于触发了按钮的单击事件. 代码非常简单,要完成这个功

JQuery实现的按钮倒计时效果_jquery

本文实例讲述了JQuery实现的按钮倒计时效果.分享给大家供大家参考,具体如下: 一个实现了在按钮上显示倒计时,倒计时完毕自动将按钮设置为不可用的效果,具体代码如下: <html> <head> <title>test count down button</title> <script src="jquery1.8.3.min.js" type="text/javascript"></script&g

javascript实现下班倒计时效果的方法(可桌面通知)_javascript技巧

本文实例讲述了javascript实现下班倒计时效果的方法.分享给大家供大家参考.具体如下: 周末了,搞个下班倒计时,娱乐下. 确保下面三点: 1.非IE浏览器,较高Chrome版本,已开启HTML5桌面通知.具体设置见下面截图 2.将这个HTML放到本地Web服务器上测试,直接双击运行无法弹出桌面通知 顺带提下,这个程序很容易扩展成定时通知. 做这个东西的过程有两点比较纠结,总结下: 1.parseInt("09")返回的是0.正确做法是parseInt("09"

javascript实现图片左右滚动效果【可自动滚动，有左右按钮】_javascript技巧

本文实例讲述了javascript实现图片左右滚动效果.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <

基于JavaScript实现手机短信按钮倒计时(超简单)_javascript技巧

在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面我就给大家提供一段代码很实用的. 废话不多说了,直接给大家贴js代码了. /* 120秒手机短信按钮倒计时 */ exports.sendmessage = function (name) { var second = 120; $(name).attr("disabled", true); var color = $(name).css('background-color'); $(name).attr(

javascript实现数字倒计时特效_javascript技巧

本文实例讲述了JS实现的网页倒计时数字时钟效果,分享给大家供大家参考,具体实现方法如下: 效果图: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript实现的倒计时时钟</title> <style> body,div{margin:0;paddi

js实现的奥运倒计时时钟效果代码_javascript技巧

本文实例讲述了js实现的奥运倒计时时钟效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>js倒计时</title> <SCRIPT language=JavaScript1.2> function setcountdown(theyear,themonth,theday){ yr=theyear;mo=themonth;da=theday } setcountdown(201

JQUERY简单按钮轮换选中效果实现方法

  这篇文章主要介绍了JQUERY简单按钮轮换选中效果实现方法,涉及jQuery鼠标事件与css样式操作的基本技巧,需要的朋友可以参考下 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <html> <head> <meta http-equiv="Content-Type" content="text/html