js时钟显示

<script type="text/javascript">
	onload=function(){
		start();
		clock = window.setInterval(‘start()‘,1000);
		btn = document.getElementById(‘btn‘);
		btn.addEventListener(‘click‘,timeOut);
		btnTxt = btn.childNodes[0];
	}

	function start(){
		var date = new Date();

		var s = date.getSeconds();
		var i = date.getMinutes();
		var h = date.getHours();
		var d = date.getDate();
		var m = date.getMonth()+1;
		var y = date.getFullYear();

                //date.toLocaleDateString()——格式化本地日期
                //date.toLocaletimeString()——格式化本地时间

		var week = [‘星期天‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘];
		week = week[date.getDay()];
		var str = y+‘-‘+m+‘-‘+d+‘  ‘+h+‘:‘+i+‘:‘+s+‘  ‘+week;

		var dv = document.getElementById(‘dv‘);
		var txt = document.createTextNode(str);
		dv.replaceChild(txt,dv.childNodes[0]);
	}

	function timeOut(){
		var start = document.createTextNode(‘开始‘);

		if(btn.firstChild.nodeValue==‘暂停‘){
			clearInterval(clock);
			var start = document.createTextNode(‘开始‘);
			btn.replaceChild(start,btn.childNodes[0]);
		}else if(btn.firstChild.nodeValue==‘开始‘){
			clock = window.setInterval(‘start()‘,1000);
			var start = document.createTextNode(‘暂停‘);
			btn.replaceChild(start,btn.childNodes[0]);
		}
	}
</script>

<div id="dv">这里显示时钟</div>
<button id="btn">暂停</button>

  

js时钟显示

时间: 2024-10-10 20:37:30

js时钟显示的相关文章

分享一个很有意思的js,动态时钟显示,能跟随鼠标移动

原文:分享一个很有意思的js,动态时钟显示,能跟随鼠标移动 源代码下载地址:http://www.zuidaima.com/share/1550463688182784.htm

js 时钟特效

时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="

Canvas基础学习(一)——实现简单时钟显示

HTML5最受欢迎的功能就是<canvas>元素.这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形.关于<canvas>元素的一些基本用法可以参考w3school. 花了一下午时间熟悉了下常用的API,也参考了下网上的一些demo,实现了一个简单的时钟显示,代码记录如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met

js时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv = "content-type" content="text/html;charset=utf-8"/> &

js简单显示动态时间点

<input type="text" id="showtime" redayonly="redayonly" /> <script> function nowGetTime(){ var date=new Date(); document.getElementById("showtime").value=date.getFullYear()+"-"+(date.getMonth()+

JS 实现显示和隐藏div(以百度地图为例)

主要参考的文章:https://my.oschina.net/xsh1208/blog/215811,https://zhidao.baidu.com/question/568774688.html 隐藏和显示div的方式有两种: 方式1:隐藏后仍占有页面空间,显示空白div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白.style="visibility: none;"document.getElementById("typediv1")

js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

js简单显示和隐藏div 01.<!DOCTYPE html> 02.<html> 03.<head> 04.<meta charset="UTF-8"> 05.<title>Insert title here</title> 06.<script type="text/javascript"> 07. window.onload=function(){ 08. document.g

周期性执行代码,显示一个时钟,这个时钟显示的是当前的年月日和小时,每秒钟刷新一次

<!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" xml:lang="en"> <head> <meta ht

Android消息机制——时钟显示和异步处理工具类(AsyncTask)

1. 时钟显示 定义布局文件——activity_my_analog_clock_thread_demo.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/to