javascript实现动态时钟的启动和停止


Posted in Javascript onJuly 29, 2020

javascript实现动态时钟的启动和停止,点击开始按钮,获取当前时间,点击停止按钮,时间停止

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>动态时钟的启动和停止</title>
 </head>
 <body background="img/2.jpg" style="background-repeat: no-repeat;margin-left: 180px;">
 <!--1.显示当前时间
 2.启动秒表
 3.停止时钟
 -->
 <h1>动态时钟</h1>
 <p>
 当前时间:<span id="clock" style="color: #FF0000;"/> </span>
 </p>
 <p>
 <input type="button" value="start" onclick="start()" style="color: #FF0000;"/>
 <input type="button" value="stop" onclick="stop()" style="color: #FF0000;"/>
 </p>
 </body>
 <script type="text/javascript">
 var timer;
 function start(){
  //设置定时器(方法的实现,毫秒数)
  timer=setInterval(function(){
  var now=new Date();
  var time=now.toLocaleTimeString();
  var c=document.getElementById("clock");
  c.innerHTML=time;
  },1000);
 }
 function stop(){
  //暂停 清楚定时器
  clearInterval(timer);
 }
 </script>
</html>

效果截图:

javascript实现动态时钟的启动和停止

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
JS实现密码框效果
Sep 10 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 #Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 #Javascript
javascript实现点亮灯泡特效示例
Oct 15 #Javascript
vue-cli 为项目设置别名的方法
Oct 15 #Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 #Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 #Javascript
微信小程序如何实现五星评价功能
Oct 15 #Javascript
You might like
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP开发负载均衡指南
2010/07/17 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
jQuery load方法用法集锦
2011/12/06 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
allbeauty美国:英国在线美容店
2019/03/11 全球购物
kfc实习自我鉴定
2013/12/14 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
选秀节目策划方案
2014/06/06 职场文书
邀请函怎么写
2015/01/30 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
mysql部分操作
2021/04/05 MySQL
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
解决xampp安装后Apache无法启动
2022/03/21 Servers
python模板入门教程之flask Jinja
2022/04/11 Python