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

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

代码如下：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <meta  http-equiv="Content-Type" content="text/html charset=utf-8">
  4. <html>
  5. <head>
  6.     <title>获取日期</title>
  7.     <style type="text/css">
  8.         p{
  9.             font-weight: bold;
  10.         }
  11.     </style>
  12.     <script type="text/javascript" >
  13.        function fun(){
  14. //            新建一个date对象
  15.             var date =new Date();
  16.             var year = date.getFullYear();
  17.             var month = date.getMonth();
  18.             var day = date.getDate();
  19.             var hour = date.getHours();
  20.             var minutes = date.getMinutes();
  21.             var seconds = date.getSeconds();
  22.             var week = date.getDay();
  23.            if(week==1){
  24.                week="一";
  25.            }if(week==2){
  26.                week="二";
  27.            }
  28.            if(week==3){
  29.                week="三";
  30.            }
  31.            if(week==4){
  32.                week="四";
  33.            }
  34.            if(week==5){
  35.                week="五";
  36.            }
  37.            if(week==6){
  38.                week="六";
  39.            }
  40.            if(week==7){
  41.                week="日";
  42.            }
  43.             var am="";
  44.             if(hour>=0 && hour<=12){
  45.                 am = "AM";
  46.             }else{
  47.                 am = "PM"
  48.             }
  49.             document.getElementById("date").innerHTML=year+"年"+month+"月"+day+"日"+" "+hour+":"+minutes+":"+seconds+" "+am+" 星期"+week;
  50.  
  51.         }
  52.         onload = function(){
  53.             setInterval("fun()",100);
  54.         }
  55.  
  56.     </script>
  57. </head>
  58. <body>
  59.     <h1>你好，欢迎访问贵美商城！</h1>
  60.     <p id="date"></p>
  61. </body>
  62. </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. Google Zxing 二维码生成与解析

    生成二维码的开源项目可谓是琳琅满目,SwetakeQRCode.BarCode4j.Zxing...... 前端有JQuery-qrcode,同样能实现生成二维码. 选择Zxing的原因可能是对 Go ...

  2. Java 基础【11】@注解

    1.注解简介 JDK 1.5 中引入的 java.lang.annotation 包提供注解编程支持,可以让类在编译.类加载.运行时被读取,并执行相应的处理. 在 Java EE应用的时候,总是免不了 ...

  3. BASE64 编码和解码

    依赖jar: import org.apache.commons.codec.binary.Base64; BASE64和其他相似的编码算法通常用于转换二进制数据为文本数据,其目的是为了简化存储或传输 ...

  4. 基于Html5缓存的页面P2P技术可行性探讨

    P2P技术,在分享大文件(你懂的)是现在必不可缺的技术,现在的人,已经很难想象在没有这玩意的互联网早期,人们是怎样的艰难求生.想当年,不要说电影,下一个稍大点的文件,都是很吃力的事情. 后来牛人科恩, ...

  5. yii2权限控制rbac之菜单menu最详细教程

    前面我们在博文 yii2搭建完美后台并实现rbac权限控制实例教程中完美实现了yii2的后台搭建和rbac权限控制,如果你还没有实现,请先看上文再回来参考本文,因为本文是在上文的基础上进行完善和补充. ...

  6. 1118ALTER TABLE tabname DISCARD TABLESPACE快速导入数据利用表空间

    -- 快速导入数据如果你有.ibd文件的一个干净的备份,你可以按如下操作从被起源的地方恢复它到MySQL安装中:相当快速 1. 发出这个ALTER TABLE语句: 2. ALTER TABLE tb ...

  7. 0929mysql前缀索引如何找到合适的位数

    前缀索引,是指对于VARCHAR/TEXT/BLOB类型的字段建立索引时一般都会选择前N个字符作为索引.索引很长的字符列,会让索引变得大且慢.索引开始的部分字符,这样可以大大节约索引空间,从而提高索引 ...

  8. 转 ext文件系统及块组

    一.文件系统概述 1. 引导块 前文中介绍过磁盘需要进行分区和格式化,才能创建文件系统并使用,那么一块已经被各式化了分区其结构是什么样的呢?分区是按照柱面来划分的,而柱面包含的是磁道,磁道上包含的是扇 ...

  9. Android NestedScrolling嵌套滑动机制

    Android NestedScrolling嵌套滑动机制 最近项目要用到官网的下拉刷新SwipeRefreshLayout,它是个容器,包裹各种控件实现下拉,不像以前自己要实现事件的拦截,都是通过对 ...

  10. Linux_Shell_脚本参数接收键盘输入

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #!/bin/bash     #提示"请输入姓名"并等待30秒,把用户的输入保存入变量name ...