JS实现按钮控制计时开始和停止功能

下面给大家分享一段实例代码关于JS实现按钮控制计时开始和停止功能，具体代码如下所示：

<span style="font-size:18px;"><body>
 小闹钟: <span id="nz"></span>
 <input type="button" value="开始计时" onclick="nzbg(this)">
 <input type="button" value="结束计时" onclick="nzbg(this)">
 <script type="text/javascript">
  function nzbg(obj)
  {
   var a = document.getElementById("nz");
   time = new Date().toLocaleString();
   a.innerHTML = time;
   if (obj.value == "开始计时")
   {
    nz_bg = window.setInterval("nzbg()",1000);
   }
   if (obj.value == "结束计时")
   {
    nz_bg = window.clearInterval(nz_bg);
   }
  }
 </script>
 </body></span>

总结

以上所述是小编给大家介绍的JS实现按钮控制计时开始和停止功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • ionic+AngularJs实现获取验证码倒计时按钮

    ionic+AngularJs实现获取验证码倒计时按钮

    按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中.设置一个$timeout,60秒后将按钮初始化到可用状态. 实现代码: (1)js代码,设置成一个directive以便多次调用. angular.module('winwin').directive('timerbutton', function($timeout, $interval){

  • js代码实现点击按钮出现60秒倒计时

    js代码实现点击按钮出现60秒倒计时

    比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip

  • JS自动倒计时30秒后按钮才可用(两种场景)

    JS自动倒计时30秒后按钮才可用(两种场景)

    展示效果图: WEB开发中经常会用到倒计时来限制用户对表单的操作,比如希望用户在一定时间内看完相关协议信息才允许用户继续下一步操作,又比如在收取手机验证码时允许用户在一定时间过后(未收到验证码的情况下)再次获取验证码.那么今天我来给大家介绍下如何使用Javascript来实现这一简单应用. 查看演示 下载源码 应用场景1:用户注册时阅读完相关协议信息后才能激活按钮 某些网站注册时要求用户同意所谓的用户协议之类的信息,如果协议内容非常重要,有些网站会要求新注册的用户一定要阅读完相关协议信息才能激活

  • javascript显示倒计时控制按钮的简单实现

    html: <a><span id="sendAgain" onclick="sendEmail()">2.再次发送激活邮件</span></a> (span控制点击事件,disabled无效) js: /*发送邮件*/ function sendEmail(){//发送邮箱认证邮件 var me = $("#sendAgain"); me.time = 60; (function() { if (

  • js实现点击注册按钮开始读秒倒计时的小例子

    js 复制代码 代码如下: <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

  • 点击按钮出现60秒倒计时的简单js代码(推荐)

    点击按钮出现60秒倒计时的简单js代码(推荐) <!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 h

  • js实现的倒计时按钮实例

    js实现的倒计时按钮实例

    本文实例讲述了js实现的倒计时按钮.分享给大家供大家参考.具体分析如下: 效果图如下: 具体代码如下: <span style="font-size: 14px;"> <input type="button" value="确定"id="rulesubmit" /> <scripttypescripttype="text/javascript"> var secs = 3

  • JS实现按钮控制计时开始和停止功能

    下面给大家分享一段实例代码关于JS实现按钮控制计时开始和停止功能,具体代码如下所示: <span style="font-size:18px;"><body> 小闹钟: <span id="nz"></span> <input type="button" value="开始计时" onclick="nzbg(this)"> <input ty

  • js实现按钮控制图片360度翻转特效的方法

    本文实例讲述了js实现按钮控制图片360度翻转特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现按钮控制图片360度翻转特效</title> <body> <script language="javascript"> var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var o

  • js实现按钮控制带有停顿效果的图片滚动

    本文实例使用js实现带有停顿效果的图片滚动,受按钮控制,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动2</title> <style> #warp{ width: 1250px; height: 300px; overflow: hidden; margi

  • 使用js实现按钮控制文本框加1减1应用于小时+分钟

    time.html代码: 复制代码 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""&

  • JS实现点击按钮控制Div变宽、增高及调整背景色的方法

    JS实现点击按钮控制Div变宽、增高及调整背景色的方法

    本文实例讲述了JS实现点击按钮控制Div变宽.增高及调整背景色的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现点击按钮后改变DiV的高度.宽度和背景色等,点击对应按钮,Div调整高度.调整宽度.调整背景色等.实现方面主要是使用JS来控制点击按钮后改变CSS样式文件,这一切都是在JS的动态控制下,比如无刷新切换网页风格的实现,可以以此为基础来扩展. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果

    jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</title> <meta name="description" cont

  • Angular实现点击按钮控制隐藏和显示功能示例

    本文实例讲述了Angular实现点击按钮控制隐藏和显示功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular显示隐藏</title> <style> .box{ width: 100p

  • JS实现音量控制拖动

    JS实现音量控制拖动

    本文实例为大家分享了JS实现音量控制拖动的具体代码,供大家参考,具体内容如下 描述: JS--实现音量控制拖动 1).有底条,有拖拽按钮     2).设置最小和最大值     3).拖动定位后,抛出事件当前的所在值 效果: 实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

  • vue同个按钮控制展开和折叠同个事件操作

    我就废话不多说了,大家还是直接看代码吧~ <el-button :icon="!moreshow?'el-icon-arrow-down':'el-icon-arrow-up'" @click="getmoreshow">{{!moreshow?更多:隐藏}}</el-button> data() { return { moreshow:false, count:1, } } mounted() { this.getmoreshow()//避

  • JS使用正则控制用户输入银行卡号及格式化

    //js正则实现用户输入银行卡号的控制及格式化 <script language="javascript" type="text/javascript"> function formatBankNo (BankNo){ if (BankNo.value == "") return; var account = new String (BankNo.value); account = account.substring(0,22); /

随机推荐