【JavaScript】一个同步于本地时间的动态时钟并且自定义时间格式

本文是对《【JavaScript】一个同步于本地时间的动态时间》一文(点击打开链接)的改进

JavaScript里面的Date类型除了可以直接toLocaleString(),转化成一个以系统格式的时间之外

还可以时间自定义格式,比如可以构造于一个仿QQ聊天框的同步于本地时间的动态时钟

具体代码如下:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义时钟</title>
</head>

<body>
<div style='text-align:center'><font id='clock' size='2' color='#666666'></font></div>
</body>
</html>
<script>
setInterval("clock()",1000);
function clock(){
	var nowTime=new Date();
	var nowYear=nowTime.getFullYear().toString();
	var nowMonth=nowTime.getMonth().toString();
	if(nowMonth<10){
		nowMonth="0"+nowMonth;
	}
	var nowDate=nowTime.getDate().toString();
	if(nowDate<10){
		nowDate="0"+nowDate;
	}
	var nowHours=nowTime.getHours().toString();
	var nowMinutes=nowTime.getMinutes().toString();
	if(nowMinutes<10){
		nowMinutes="0"+nowMinutes;
	}
	var nowSecond=nowTime.getSeconds().toString();
	if(nowSecond<10){
		nowSecond="0"+nowSecond;
	}
	document.getElementById("clock").innerHTML=nowYear+"/"+nowMonth+"/"+nowDate+" "+nowHours+":"+nowMinutes+":"+nowSecond;
}
</script>

思想与《【JavaScript】一个同步于本地时间的动态时间》一文(点击打开链接)完全相同,关键是setInterval函数,同时,之所以要加上各类少于10的条件结构,是因为,如果不加的话,比如19:01:01会变成19:1:1不符合我们的习惯。

时间: 2024-08-05 14:58:10

【JavaScript】一个同步于本地时间的动态时钟并且自定义时间格式的相关文章

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

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

【JavaScript】一个同步于本地时间的动态时间

这例子非常简单,了解JavaScript之后就是几行的代码便能够完成的事情, 但是对于一些未接触过JavaScript的人来说,几乎很大工程的样子,然后在网上苦苦寻觅代码,之后在茫茫的html代码中寻求不到,最终得不到要领. 一.基本目标 实现一个随同客户端(浏览者机器上的)时间的网页文本时间,使用最短的代码. 二.制作过程 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww

kindeditor 4 指定生成文件的时间日期/动态获取My97的时间

最近后台要求要指定上传附件的时间日期,编辑器是kindeditor,仔细研究后发现可以借助clickToolbar事件,传递时间到后台,但是中途发现传递的时间总是初始化my97的时间,改变后的时间只有在提交时才能生效 于是又研究了下My97,终于解决 1 <tr class="info"> 2 <td class="text-right">自定义发布时间</td> 3 <td> 4 <fmt:formatDate

Linux应用层系统时间写入RTC时钟的方法

Linux内核版本:linux-3.0.35 开发板:i.MX6S MY-IMX6-EK200 系统:Ubuntu12 前言:之前写过一篇关于如何通过应用层程序读取系统时间的blog,今天再写一篇如何写入并保存RTC时钟的blog吧. 一.写入时间 1.预备知识: a.mktime 头文件:#include <time.h> 函数:time_t mktime(struct tm *timeptr) 函数说明:mktime()用来将timeptr所指的tm结构体数据换成从公元1970年1月1日0

动态时钟的实现

下面是动态时钟的效果图(ps:不过好像看不出动态效果来): 下面是具体的代码: <!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"> <hea

JavaScript+svg绘制的一个动态时钟

结果图: 代码如下: <!DOCTYPE html> <html> <head> <title>动态时钟</title> </head> <body > <script type="text/javascript"> function updateTime(){ //更新svg时钟来显示当前时间 var now =new Date(); //当前时间 var min = now.getMin

第一百四十五节,JavaScript,同步动画

JavaScript,同步动画 将上一节的,移动透明动画,修改成可以支持同步动画,也就是可以给这个动画方法多个动画任务,让它同时完成 原理: 向方法里添加一个属性,这个属性是一个对象,同步动画属性,属性值为对象,对象里面是,动画方式:目标量,组合的键值对,只能动画方式加目标量的键值对 /** yi_dong_tou_ming()方法,动态改变css属性说明 * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作 * 1,x将元素横向左移动或者右移动 * 2, y将元素竖向

Linux时间子系统之八:动态时钟框架(CONFIG_NO_HZ、tickless)

在前面章节的讨论中,我们一直基于一个假设:Linux中的时钟事件都是由一个周期时钟提供,不管系统中的clock_event_device是工作于周期触发模式,还是工作于单触发模式,也不管定时器系统是工作于低分辨率模式,还是高精度模式,内核都竭尽所能,用不同的方式提供周期时钟,以产生定期的tick事件,tick事件或者用于全局的时间管理(jiffies和时间的更新),或者用于本地cpu的进程统计.时间轮定时器框架等等.周期性时钟虽然简单有效,但是也带来了一些缺点,尤其在系统的功耗上,因为就算系统目

浏览器端javascript调用手机终端本地功能实现02-功能点汇总

上篇博文已经说明,本篇直接进入主题.本篇大致说明总体功能以及代码用途,下篇将功能点逐一详细说明. 功能点包括: 拍照相关接口(camera) 功能函数名称 作用 备注 invokeCamera() 调用摄像头拍照 requestAlbum() 调用相册功能 requestAlbumMulti() 相册多选 requestAlbumMultiUpload() 相册多选完后上传 2. 录音相关接口(media) 功能函数名称 作用 备注 startRecord() 录制音频 stopRecord()