js实现时钟定时器

2024-10-30 11:07:04

本文实例为大家分享了js实现时钟定时器的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>时钟</title>
 <script type="text/javascript">
 function showClock(){
 // 1. 获取当前时间
 var time = new Date();
 // document.write(time);
 var year = time.getFullYear();
 // document.write(year);
 var month = time.getMonth() + 1;
 // document.write(month);

 var day = time.getDate();
 // var day1 = time.getDay();
 // document.write(day1);

 var hours = time.getHours();
 // document.write(hours);

 var minutes = time.getMinutes();
 // document.write(minutes);

 var seconds = time.getSeconds();

 document.getElementById("clock").innerHTML = year+"-"+month+"-"+day+" "
 +hours+":"+minutes+":"+seconds;

 }

 var flag = true;
 var id;
 function runClock(){
 var btn = document.getElementById("btn");

 if(flag){
  // 计时操作
  id = setInterval("showClock()",1000);
  flag = false;
  btn.innerHTML = "停止";
 }else{
  // 停止计时操作
  clearInterval(id);
  flag = true;
  btn.innerHTML = "动起来";
 }  

 }

 </script>
 </head>
 <body>
 <button οnclick="showClock()">点击显示时钟</button>
 <div id="clock">

 </div>
 <button id="btn" οnclick="runClock()">动起来</button>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

javascript基于定时器实现进度条功能实例

本文实例讲述了javascript基于定时器实现进度条功能.分享给大家供大家参考,具体如下: Javascript 中的定时器 window度一线下面的方法 window.setInterval() 启动定时器 1.setInterval(function(函数),time(每隔多少时间执行一次函数,单位是毫秒)) 会重复执行某项操作 2.setTimeout 运用在延迟一段时间,再进行某项操作 setTimeout(function,time) ,setTimeout 不会重复! 停止定时器
JS动画定时器知识总结

广义说:一切通过js改变的视觉呈现都叫动画:例如,按钮,链接等元素交互反馈. 狭义说:通过定时器连续调用js函数进行元素属性改变产生的视觉动画效果. 定时器定时器是JavaScript动画的核心技术: setTimeout(),setInterval()是大家熟知的,以前经常使用的: 一般都是做些辅助性,锦上添花的事: 细心的人可能会发现一个现象,从其他标签页切换到有循环动画页面会有卡顿和急速帧切换现象: 问题就在于他们的内在运行机制: 认识setTimeout 第一个参数推荐用函数形式,字符
js定时器+简单的动画效果实例

1.向下滑动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>向下滑动</title> <style> body { margin: 0px; } #show { width: 200px; /* 高度为 0 */ height: 100px; background-color: lightc
js定时器实现倒计时效果

本文实例为大家分享了js定时器实现倒计时效果展示的具体代码,供大家参考,具体内容如下日期函数倒计时 = 用将来的时间 - 现在的时间问题:将来时间距离 1970 毫秒数 - 现在距离 1970年1 用将来的毫秒数 - 现在的毫秒数不断转换就可以了 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <t
javascript实现动态时钟的启动和停止

javascript实现动态时钟的启动和停止,点击开始按钮,获取当前时间,点击停止按钮,时间停止 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态时钟的启动和停止</title> </head> <body background="img/2.jpg" style="background-re
AngualrJs清除定时器遇到的坑

angualrJs清除定时器爬坑之路: 今天发现一个奇怪问题,放在自定义指令里边的定时器竟然在页面跳转之后,在另一个页面这个循环定时器还在执行,这肯定是不行的,会影响系统的性能. 我在angular里边用原生的方法window.onunload方法竟然不管用,所以只好用angular自己的方法$destroy,这页面跳转,DOM结构发生变化是都能清除定时器 var timer = setInterval(function(){ $scope.$apply(function(){ //这里是想要定
JavaScript实现抖音罗盘时钟

本文实例为大家分享了JavaScript实现抖音罗盘时钟的具体代码,供大家参考,具体内容如下其实很早以前就想发了,很多东西其实并不难,只要多动手动脑就行了,下面直接上代码,其他的自己下去慢慢研究吧! HTML部分代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co
JavaScript定时器setTimeout()和setInterval()详解

本文实例为大家分享了JavaScript定时器的具体方法,供大家参考,具体内容如下 1. 超时调用setTimeout() 顾名思义,超时调用的意思就是在一段实际之后调用(在执行代码之前要等待多少毫秒) setTimeout()他可以接收两个参数: 1.要执行的代码或函数 2.毫秒(在执行代码之前要等待多少毫秒) function test(){ alert("孙悟空"); } setTimeout(test,2000); //2s后弹出 "孙悟空" clearTi
js计时事件实现圆形时钟

本文实例为大家分享了js圆形时钟效果的具体代码,供大家参考,具体内容如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>时钟</title> <style> *{margin: 0; padding: 0;} div.dd{ margin: 0 auto; width: 400px; padding-top: 100px
JavaScript-定时器0~9抽奖系统详解（代码）

具体代码如下: <html> <head> <title>定时器0~9抽奖系统</title> <meta charset="UTF-8" /> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script t

js实现时钟定时器

相关推荐

随机推荐