闲着没事在闪存里看到有人需要js显示当前时间,就一时兴起写了个。

输出格式:“2013年12月18日 星期三 上午9:05:00 ”。

<script type="text/javascript">
function tick() {
var hours, minutes, seconds, xfile;
var intHours, intMinutes, intSeconds;
var today, theday;
today = new Date();
            var d = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"];
theday = today.getFullYear() + "年" + [today.getMonth() + 1] + "月" + today.getDate() + "日 " + d[today.getDay()];
            intHours = today.getHours();
            intMinutes = today.getMinutes();
            intSeconds = today.getSeconds();
            if (intHours == 0) {
                hours = "12:";
                xfile = " 午夜";
            } else if (intHours < 12) {
                hours = intHours + ":";
                xfile = " 上午";
            } else if (intHours == 12) {
                hours = "12:";
                xfile = " 正午";
            } else {
                intHours = intHours - 12
                hours = intHours + ":";
                xfile = " 下午";
            }
if (intMinutes < 10) {
minutes = "0" + intMinutes + ":";
} else {
minutes = intMinutes + ":";
}
if (intSeconds < 10) {
seconds = "0" + intSeconds + " ";
} else {
seconds = intSeconds + " ";
}
timeString = theday + xfile + hours + minutes + seconds;
document.getElementById("lbClock").innerHTML = timeString;
window.setTimeout("tick();", 100);
}
window.onload = tick;
</script>

PS:感谢undefined的指点,简化了很多。

以上是客户端时间,那么要想显示服务器时间怎么办呢?对于精确度要求不高的情况有个方案:

页面第一次打开时获取一次服务器时间,然后根据这个时间通过js计时器计算并显示时间。

//计算时间
function getTime() {
serverTime.setSeconds(serverTime.getSeconds() + 1);
myTime.innerHTML = getTimeStr(serverTime);
}
//输出时间格式 2014-01-01 00:01:01
function getTimeStr(t) {
var result = t.getFullYear() + "-" + bl(t.getMonth() + 1) + "-" + bl(t.getDate()) + " " + bl(t.getHours()) + ":" + bl(t.getMinutes()) + ":" + bl(t.getSeconds());
return result;
}
//补零
function bl(n) {
return n.toString().length > 1 ? n : "0" + n;
}
//显示时间
function showTime() {
myTime = document.getElementById("lbClock");
//new Date无法转换 2014-01-01 01:01:01, - 替换成 / 之后转换正常
serverTime = new Date(myTime.innerHTML.replace(/-/g, "/"));
setInterval(getTime, 1000);
}
var myTime = '', serverTime = '';
window.onload = showTime;

js显示当前时间的更多相关文章

  1. js显示日期时间(集锦)

    1.最简单的时钟显示 <div id="time"></div> <script> setInterval(); </script>

  2. js 显示日期时间,时间过一秒加1

    html: <div id="data"><font>2017年10月17日 15:11:11</font></span> js: ...

  3. js获取当前时间显示在页面上

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. JS 显示时间与倒计时练习

    显示时间与倒计时 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. JS实现以日历形式显示当前时间

    效果图: <script language="Javascript"> var datelocalweek=new Array("星期日", &qu ...

  6. js使用my97插件显示当前时间,且select控制计算时间差

    做页面需要两个时间输入框一个显示当前时间,一个显示之前的时间,并且需要一个select下拉框控制两个时间输入框之间的差,效果如下图: 这里使用的是My97DatePicer,简单方便,引入my97插件 ...

  7. JS获取当前时间(YYYY-MM-DD ),element显示默认当前时间,显示默认昨天,显示默认上个月

    原文链接:点我 进来的随便看看,或许有帮助 vue+element-ui   datepicker 设置默认日期用的框架是vue+element-ui ,以下是时间控件 <el-form-ite ...

  8. JS显示动态的系统时间--JavaScript基础

    1.网页中实时显示当前时间 <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  9. 前端开发自学之JavaScript——显示当前时间

    <html> <head> <title>JavaScript</title> <script language="javascript ...

随机推荐

  1. 【matlab】MATLAB程序调试方法和过程

    3.8  MATLAB程序的调试和优化 在MATLAB的程序调试过程中,不仅要求程序能够满足设计者的设计需求,而且还要求程序调试能够优化程序的性能,这样使得程序调试有时比程序设计更为复杂.MATLAB ...

  2. <我是一只IT小小鸟>读书笔记

    这篇文章给我感触最深的是开篇蒋宇东所出的一道选择题--今后的发展选择有三条:A.做一辈子IT民工:B.将大学时欠下来的债补上:C.改行. 他们用自己的成长故事告诉师弟师妹们:一定要弄清楚上大学首要的任 ...

  3. 安装java后的环境变量配置

    安装java后的环境变量配置- 自定义安装目录可能会带来一些烦恼,配置环境变量可能很难找对目录,所以倒不如干脆就用默认的安装目录,记住它,安装完java之后去到那个路径把路径复制, 然后进行环境变量配 ...

  4. mac 下配置protobuf 3.0 golang环境

    protobuf 3.0  与 之前的 protobuf 2.6 的语法是不一样的.需要重新安装一下,本机的环境是 OS X Yosemite  10.10.2 1. 不采用home brew安装,用 ...

  5. jQuery--checkbox全选

    jQuery.attr  获取/设置对象的属性值,如: $("input[name='chk_list']").attr("checked");     //读 ...

  6. Libgdx 开发指南(1.2) 应用框架——模块概览

    模块概览 引言 LibGDX由一些为一个典型游戏架构中的各个步骤提供服务的模块组成. Input:为所有平台提供一致的输入模型与处理器.支持键盘.触屏.加速度传感器与鼠标. Graphics:使用硬件 ...

  7. apache2服务器mod_rewrite模块 开启方法[linux, ubuntu]

    在UBUNTU系统中要启用mod_rewrite的方法有两种: 第一种: 在终端中执行 sudo a2enmod rewrite 指 令后,即启用了 Mod_rewrite 模块, apache2服务 ...

  8. .Net MVC框架 + WCF 搭建 集群开发

    http://www.cnblogs.com/zhijianliutang/archive/2012/01/28/2258844.html

  9. sphinx 增量索引 实现近实时更新

    一.sphinx增量索引的设置   数据库中的已有数据很大,又不断有新数据加入到数据库中,也希望能够检索到.全部重新建立索引很消耗资源,因为我们需要更新的数据相比较而言很少.例如.原来的数据有几百万条 ...

  10. 动态获取项加入到SQL中去统计

    public static List<CustomerAppraisalInfo> ListCustomerAppraisal(int pageIndex, int pageSize, s ...