需求说明:制作显示年、月、日、星期几并且显示上午(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. Oracle 数据库日常巡检

    1. 检查数据库基本状况 包含:检查Oracle实例状态,检查Oracle服务进程,检查Oracle监听进程,共三个部分. 1.1. 检查Oracle实例状态 select instance_name ...

  2. C#基础之IEnumerable

    1.IEnumerable的作用 在使用Linq查询数据时经常以IEnumerable<T>来作为数据查询返回对象,在使用foreach进行遍历时需要该对象实现IEnumerable接口, ...

  3. 不得不玩玩NHibernate

    1.0=>前言 放着好好的EF不用,为什么要来玩NHibernate了?那是因为现在的工作内容就是维护一个比较老的项目,第一版是公司找外包做的,跟数据库打交道这块用的NHibernate,虽然都 ...

  4. svn1.8 server client eclipse 插件 配置 完全教程

    svn毋庸置疑,广受欢迎的版本管理软件,我们这里以1.8.10版本为例 本文分三部分 第一部分,服务器端svn安装与配置 第二部分,eclipse下svn插件安装与配置 第三部分,客户端svn简单介绍 ...

  5. python3.4 build in functions from 官方文档 翻译中

    2. Built-in Functions https://docs.python.org/3.4/library/functions.html?highlight=file The Python i ...

  6. 【Python】[函数式编程]高阶函数,返回函数,装饰器,偏函数

    函数式编程高阶函数 就是把函数作为参数的函数,这种抽象的编程方式就是函数式编程.--- - -跳过,不是很理解,汗 - ---

  7. iOS-- 重要的链接

    面试题: http://www.jianshu.com/p/6a57c6e902e8 富文本: http://www.cnblogs.com/jys509/p/5018027.html

  8. C#(winform)为button添加背景图片

    1.既然是添加背景图片 所以这里应该使用 Button.BackgroudImage = "" ;来设置图片 而不应该使用  Button.Image = "" ...

  9. [转]Hibernate update和saveOrUpdate详解

    原文地址:http://www.iteye.com/topic/2712 先来点概念: 在Hibernate中,最核心的概念就是对PO的状态管理.一个PO有三种状态: 1.未被持久化的VO 此时就是一 ...

  10. 6.7-3将数组arr中索引值为2的元素替换为“bb”

    package shuzu; import java.util.Arrays; public class TH { public static void main(String[] args) { / ...