需求说明：制作显示年、月、日、星期几并且显示上午（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. 防止 JavaScript 自动插入分号

    JavaScript语言有一个机制:在解析时,能够在一句话后面自动插入一个分号,用来修改语句末尾遗漏的分号分隔符. 然而,由于这个自动插入的分号与JavaScript语言的另一个机制发生了冲突,即所有 ...

  2. Theano2.1.16-基础知识之调试：常见的问题解答

    来自:http://deeplearning.net/software/theano/tutorial/shape_info.html Debugging Theano: FAQ and Troubl ...

  3. js时间倒计时

    看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...

  4. 学堂在线 UWP 首版

    好久没有写博客了,主要是最近在写一个小小的App.<(￣︶￣)> 不知道看各位有木有爱看慕课的,作为一名资深的大三学渣的我有看慕课的习惯.一直在看学堂在线的慕课,感觉质量确实还可以,但是遗 ...

  5. ModernUI教程：使用WPF4.0

    Modern UI 同时支持WPF4.0和4.5.下载包中包含了这两个版本的程序集.当你使用Nuget下载时,会根据你选择的运行时版本自动选择对应的版本下载.而Visual Studio2012的模板 ...

  6. BI的相关问题[转]

    什么是BI? Business Intelligence(BI) = Data Warehouse(DW) + OLAP + Data Mining(DM) 商业智能=数据仓库+联机分析+数据挖掘 做 ...

  7. js的this什么时候会出现报错

    var aa ={ name:"boy", age:, like: function(){ console.log(this.name); } } //aa.like();//这样 ...

  8. [BZOJ1924][Sdoi2010]所托门王的宝藏（缩点+DP）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1924 分析: 首先把传送门作为点建图 这个数据很弱的,没有那种卡你的. 把每行的情况存 ...

  9. SQL复杂查询和视图

    子查询 现实中,很多情况下需要进行下述条件判断 某一元素是否是某一集合成员 某一集合是否包含另一集合 测试集合是否为空 测试集合是否存在另一元组 子查询是出现在WHERE子句中的SELECT语句被称为 ...

  10. LXC的介绍

    LXC又名Linux container,是一种虚拟化的解决方案,这种是内核级的虚拟化.(主流的解决方案Xen ,KVM, LXC) 介绍 通过namespace进行资源的隔离,Gust1下的进程与G ...