需求说明：制作显示年、月、日、星期几并且显示上午（AM）和下午（PM）的

12进制的时钟,具体效果如下所示：

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<meta  http-equiv="Content-Type" content="text/html charset=utf-8">

<html>

<head>

    <title>获取日期</title>

    <style type="text/css">

        p{

            font-weight: bold;

        }

    </style>

    <script type="text/javascript" >

       function fun(){

//            新建一个date对象

            var date =new Date();

            var year = date.getFullYear();

            var month = date.getMonth();

            var day = date.getDate();

            var hour = date.getHours();

            var minutes = date.getMinutes();

            var seconds = date.getSeconds();

            var week = date.getDay();

           if(week==1){

               week="一";

           }if(week==2){

               week="二";

           }

           if(week==3){

               week="三";

           }

           if(week==4){

               week="四";

           }

           if(week==5){

               week="五";

           }

           if(week==6){

               week="六";

           }

           if(week==7){

               week="日";

           }

            var am="";

            if(hour>=0 && hour<=12){

                am = "AM";

            }else{

                am = "PM"

            }

            document.getElementById("date").innerHTML=year+"年"+month+"月"+day+"日"+" "+hour+":"+minutes+":"+seconds+" "+am+" 星期"+week;

        }

        onload = function(){

            setInterval("fun()",100);

        }

    </script>

</head>

<body>

    <h1>你好，欢迎访问贵美商城！</h1>

    <p id="date"></p>

</body>

</html>

JavaScript制作时钟特效的更多相关文章

  1. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  2. 使用JavaScript制作页面特效2

    1.Date对象的常用方法 setFullYear() setMonth() setDate() setHours() setMinutes() setSeconds() 定时函数 setTimeou ...

  3. 利用Javascript制作网页特效（时间特效）

    在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...

  4. 原生javascript制作时钟

    用JavaScript来制作实时的时钟 效果图如下: 接下来,我会一步一步向大家介绍如何制作,并将里面的一些值得注意的事项提出来. 首先是把框架搭构起来, <div> <canvas ...

  5. 使用HTML5中的Canves标签制作时钟特效

    <!DOCTYPE html > <html> <head> </head> <body> <canvas id="cloc ...

  6. 用JavaScript制作页面特效

    1.Window对象 名称 history:有关客户访问过的URL的信息 location:有关当前URL的信息 screen:有关客户端的屏幕和显示性能的信息 常用方法 prompt():弹出输入框 ...

  7. HTML+JavaScript制作表白特效，表白不成功，小编现场吃雪

    今年的雪特别美,长沙自从08年后的最大的一场学了,今天小编给大家制作一个表白特效,希望大家喜欢,如果你是程序员希望对你有帮助,追到你喜欢的女孩,哈哈~追不到对象,小编现场吃学给你大家看 下图是爱心飘落 ...

  8. 利用Javascript制作网页特效（其他常见特效）

    设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)'; this ...

  9. 利用Javascript制作网页特效（窗口特效）

    全屏显示窗口 利用fullscreen=yes可以制作全屏显示窗口. ①:在body标签内输入以下代码: <div align="center"> <input ...

随机推荐

  1. 我的Logo设计简史

    近日,日本东京奥运会会微因涉嫌抄袭而被弃用的新闻引起设计界的一翻热论.在此我想到自己的LOGO设计,虽说并一定不好看甚至自己看回来都觉得略丑,但 几乎没有过抄袭的念头.有句话说,不想当设计师的程序猿不 ...

  2. Canvas之蛋疼的正方体绘制体验

    事情的起因 之前写了篇谈谈文字图片粒子化 I,并且写了个简单的demo -> 粒子化.正当我在为写 谈谈文字图片粒子化II 准备demo时,突然想到能不能用正方体代替demo中的球体粒子.我不禁 ...

  3. C#发展历程以及C#6.0新特性

    一.C#发展历程 下图是自己整理列出了C#每次重要更新的时间及增加的新特性,对于了解C#这些年的发展历程,对C#的认识更加全面,是有帮助的. 二.C#6.0新特性 1.字符串插值 (String In ...

  4. C#根据当前时间获取周，月，季度，年度等时间段的起止时间

    最近有个统计分布的需求,需要按统计本周,上周,本月,上月,本季度,上季度,本年度,上年度等时间统计分布趋势,所以这里就涉及到计算周,月,季度,年度等的起止时间了,下面总结一下C#中关于根据当前时间获取 ...

  5. java中的static详解

    如果一个类成员被声明为static,它就能够在类的任何对象创建之前被访问,而不必引用任何对象.static 成员的最常见的例子是main( ) .因为在程序开始执行时必须调用main() ,所以它被声 ...

  6. Android四大组件之Activity详解——传值和获取结果

    废话不多说,先来看效果图 项目源码: http://download.csdn.net/detail/ginodung/8331535 程序说明: 在MainActivity中输入用户名和密码,然后提 ...

  7. Android EditText控件即设置最小高度又运行高度随内容增加而变化

    (转)http://www.aichengxu.com/view/1405748   记录学习用 如题,有时候EditText需要一个最小的高度,但是在输入更多内容时,要随着内容的增加而变化高度,一般 ...

  8. sql-schema与catalog

    schema: 指的是说当偶create database caiceclb时,caiceclb就是一个schema catalog: 指的是所有的database目录,就像上图显示的那样,将MySQ ...

  9. Css-控制div斜转

    必须放在css声明中 div { transform: rotate(45deg); -o-transform: rotate(45deg); float: right; -webkit-transf ...

  10. selenium 3 对我们的影响

    The major change in Selenium 3.0 is we're removing the original Selenium Core implementation and rep ...