js 动态时钟

<!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>
<script type="text/javascript">
//实例:动态时钟
/*
    (1)时间日期信息,应该在一个<div>中来显示
    (2)定时器:每隔一秒再次访问系统时间,window对象的setTimeout()
    (3)时钟显示的时机(事件):当网页加载完成后才显示,事件onload
    (4)如何将 时间日期信息 写入到指定的<div>中,DOM对象中的innerHTML属性
*/

//定义函数:构建要显示的时间日期字符串
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>
时间: 2024-10-09 05:29:36

js 动态时钟的相关文章

js+css3实现动态时钟-------Day66

昨天搬家一天,宽带到最后也没有安装上,颇为恼火,但是收拾了一天新租的房屋,倒有了颇多的想法,这里先来实现一个--动态时钟(已经上传到资源里了,图片整的有些粗糙了,汗...) 这里来记录下,这个看起来简单好实现的功能,我在实现的过程中碰到了哪些问题,因为这时还没查看网上的代码,只是根据自己现阶段的学习来做的,可能会有些麻烦,有些粗糙,但是终归是实现了这个效果,心里还是小开心了下. 先来张最终实现的效果图(静态图片); 首先准备素材,我从网上搜到了一个时钟的素材,谁让我的ps还菜的菜呢,然后我有了表

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

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

canvas简单实现动态时钟

使用到的知识: 1.     获取系统时间 2.     画图形,空心图形,实心图形,以及一些属性 3.     for循环 准备工作:添加一块画布1000*1000(随意),引用canvas.js <!doctype html> <html>  <head>   <meta charset="UTF-8">   <meta name="Generator" content="EditPlus?&quo

Js动态获取iframe子页面的高度总结

问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置高度 涉及了一些兼容问题: IE用attachEvent | 3C用onload来判断子页面是否加载完成. IE用contentWindow | 3C用contentDocument来获取子页面 IE用document.documentElement.scrollHeight(兼容ie6 ie7)|

js 动态生成背景图 GeoPattern

以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> <head> <title>js 生成随机背景图</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></s

浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应

随着3G的普及,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?本篇文章将讲述自适应网页设计的概念和方法,使网页开发人员维护同一个网页代码,即可使网站在多种设备上具有更好的阅读体验.本文详细介绍了自适应网页的实现方法,希望能给迷惑的你带来帮助. 一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,

js动态生成数据列表

我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js来动态生成表格. 首先我们需要先写好页面的样式. html部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; chars

js 动态修改css文件

_.find(document.styleSheets[4].cssRules,function(cssRule){ if(cssRule.selectorText && cssRule.selectorText.indexOf(".navbar-fixed-top2")>-1){ cssRule.style.position=""; cssRule.style.top = "0px"; } if(cssRule.selec

js动态改变iframe的高度

js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%"  height="200" frameborder="0" src="a.htm"〉 〈/iframe〉 而a.html不是固定大小的,这个时候嵌套的iframe就会出现滚动条. 通过js获取iframe的高度,然后动态的改变,这样就不会出现滚动条. 方式一:在jsp的body里增加onload方法