基于javascript实现动态显示当前系统时间
更新时间：2016年01月28日 09:36:26 作者：gyz418
这篇文章主要介绍了基于javascript实现动态显示当前系统时间，以一个完整实例形式较为详细的分析了js动态显示当前系统时间的实现技巧，需要的朋友可以参考下
本文实例讲解了javascript实现动态显示当前系统时间的详细代码，具体内容如下
- （1）时间日期信息，应该在一个<div>中来显示
- （2）定时器：每隔一秒再次访问系统时间，window对象的setTimeout()
- （3）时钟显示的时机(事件)：当网页加载完成后才显示，事件onload
- （4）如何将 时间日期信息 写入到指定的<div>中，DOM对象中的innerHTML属性
效果图：
具体代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//定义函数：构建要显示的时间日期字符串
function showTime()
{
//创建Date对象
var today = new Date();
//分别取出年、月、日、时、分、秒
var year = today.getFullYear();
var month = today.getMonth()+1;
var day = today.getDate();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
//如果是单个数，则前面补0
month = month<10 ? "0"+month : month;
day = day <10 ? "0"+day : day;
hours = hours<10 ? "0"+hours : hours;
minutes = minutes<10 ? "0"+minutes : minutes;
seconds = seconds<10 ? "0"+seconds : seconds;
//构建要输出的字符串
var str = year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
//获取id=result的对象
var obj = document.getElementById("result");
//将str的内容写入到id=result的<div>中去
obj.innerHTML = str;
//延时器
window.setTimeout("showTime()",1000);
}
</script>
<style type="text/css">
#result{
width:500px;
border:1px solid #CCCCCC;
background:#FFFFCC;
margin:50px auto;
font-size:24px;
color:#FF0000;
padding:20px;
}
</style>
</head>
<body onload="showTime()">
<div id="result"></div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要介绍了随鼠标移动的时钟非常漂亮遗憾的是只支持IE,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了2种JavaScript主要继承方式，一种是通过原型的方式，一种是通过借用call&apply的构造函数方式，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要给大家介绍了Javascript中常用类型的格式化方法，其中包括格式化浮点数、格式化有符号整数(int32)、格式化无符号整数(uint32)、格式化布尔值以及格式化字符串等，文中给出了详细的示例代码，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要介绍了详解从0开始搭建微信小程序(前后端)的全过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
下面小编就为大家带来一篇js获取css的各种样式并且设置他们的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了微信小程序换肤功能实现代码，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-08-08
这篇文章主要介绍了JS简单实现仿百度控制台输出信息效果,涉及javascript中console.log函数的简单使用技巧,需要的朋友可以参考下2016-09-09
在TypeScript中,我们通过使用类型别名reference指令、类型守卫、泛型、接口、类型别名等来提高代码的可维护性以及可读性,这篇文章主要介绍了TypeScript开发中规范编码来提高代码的可读性,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了javaScript实现鼠标在文字上悬浮时弹出悬浮层效果的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
这篇文章主要介绍了js改变文章字体大小的方法，大家在使用word文档时工具栏为大家提供更改字体大小的选项，那js是如何改变文章字体大小，下文为大家揭晓，需要的朋友可以参考下2016-01-01
最新评论