显示时间：
<!DOCTYPE html>
<html>
<head>
<title>clock</title>
<script>
function displayTime(){
var elt = document.getElementById("clock");
var now = new Date();
elt.innerHTML = now.toLocaleTimeString();
setTimeout(displayTime,1000);
}
window.onload = displayTime;
</script>
<style>
#clock{
font: bold 24pt sans;
background: #ddf;
padding: 10px;
border: solid black 2px;
border-radius: 10px;}
</style>
</head>
<body>
<span id="clock"></span>
</body>
</html>Defaultpage：HI！
<!DOCTYPE html >
<html>
<head>
<meta charset=utf-8" />
<title>DefaultPage</title>
<style type="text/css">
body {
background-color: #ECECEC;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #3c3c3c;
}
.demo{width:600px;margin:0 auto;}
.demo p:first-child {
text-align: center;
font-family: cursive;
font-size: 150px;
font-weight: bold;
line-height: 100px;
letter-spacing: 5px;
color: #fff;
}
.demo p:first-child span {
cursor: pointer;
text-shadow: 0px 0px 2px #686868,
0px 1px 1px #ddd,
0px 2px 1px #d6d6d6,
0px 3px 1px #ccc,
0px 4px 1px #c5c5c5,
0px 5px 1px #c1c1c1,
0px 6px 1px #bbb,
0px 7px 1px #777,
0px 8px 3px rgba(100, 100, 100, 0.4),
0px 9px 5px rgba(100, 100, 100, 0.1),
0px 10px 7px rgba(100, 100, 100, 0.15),
0px 11px 9px rgba(100, 100, 100, 0.2),
0px 12px 11px rgba(100, 100, 100, 0.25),
0px 13px 15px rgba(100, 100, 100, 0.3);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.demo p:first-child span:hover {
text-shadow: 0px 0px 2px #686868,
0px 1px 1px #fff,
0px 2px 1px #fff,
0px 3px 1px #fff,
0px 4px 1px #fff,
0px 5px 1px #fff,
0px 6px 1px #fff,
0px 7px 1px #777,
0px 8px 3px #fff,
0px 9px 5px #fff,
0px 10px 7px #fff,
0px 11px 9px #fff,
0px 12px 11px #fff,
0px 13px 15px #fff;
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.demo p:not(:first-child) {
text-align: center;
color: #666;
font-family: cursive;
font-size: 20px;
text-shadow: 0 1px 0 #fff;
letter-spacing: 1px;
line-height: 2em;
margin-top: -50px;
}
</style>
<script type="text/javascript">
function countDown(secs,surl){
var jumpTo = document.getElementById('jumpTo');
jumpTo.innerHTML=secs;
if(--secs>0){
setTimeout("countDown("+secs+",'"+surl+"')",1000);
}
else{
location.href=surl;
}
}
</script>
</head>
<body>
<div class="demo">
<p><span>H</span><span>i</span><span>!</span></p>
</div>
</body>
</html>canvas标签实现网页H5动态时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#mycanvas{
position: absolute;
left: 50%;
margin-left: -250px;
border: 5px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
background-color: deepskyblue;
}
#box{
margin: 0 auto;
width: 190px;
height: 60px;
background-color: #ff6700;
border: 5px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
color: #fff;
line-height: 60px;
font-size: 1.2em;
}
</style>
</head>
<body>
<!--
canvas:H5新增的画布对象,可以在其中绘制任何的图形,以及线条效果包括图片
注意canvas的尺寸应该通过元素的属性直接设置,而不是使用样式实现(会失帧)
-->
<div id="box"></div>
<canvas id="mycanvas" width="500px" height="500px"></canvas>
<script>
// 获取画布对象
var mycanvas = document.getElementById('mycanvas');
console.info(mycanvas);
// 获取一个2d绘图环境(拿到一支画笔)
var ctx = mycanvas.getContext('2d');
function draw(){
var date = new Date();
var hours = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
//console.info(hours+':'+min+':'+sec);
hours = hours > 12 ? hours-12 : hours;
// 清除画布(防止覆盖)
ctx.clearRect(0,0,500,500);
// 初始化画笔的样式
ctx.lineWidth = 5;
ctx.strokeStyle = '#fff'; // 设置线条颜色
ctx.beginPath(); // 开始一个绘图路径
// 设置一个圆形路径
ctx.arc(250,250,150,0,360,false);
ctx.stroke(); // 绘制图形
ctx.closePath(); // 结束一个绘图路径
// 绘制刻度(时刻度)
for(var i = 0; i < 12; i++){
ctx.beginPath();
ctx.lineWidth = 10;
ctx.save(); // 保存当前绘图环境
ctx.translate(250,250); // 重置绘制起始位置(将圆心点作为坐标原点(0,0))
ctx.rotate(i*30*Math.PI/180); // 旋转画布到一定的弧度
ctx.moveTo(0,140); // 设置绘制线条的起始位置
ctx.lineTo(0,150); // 设置线条的结束位置
ctx.stroke(); // 绘制路径
ctx.restore(); // 还原初始绘图环境
ctx.closePath();
}
// 绘制刻度(分刻度)
for(var i = 0; i < 60; i++){
ctx.beginPath();
ctx.lineWidth = 3;
ctx.save();
ctx.translate(250,250);
ctx.rotate(i*6*Math.PI/180);
ctx.moveTo(0,140);
ctx.lineTo(0,145);
ctx.stroke();
ctx.restore();
ctx.closePath();
}
// 绘制时针 分针 秒针
ctx.beginPath();
ctx.lineWidth = 6;
ctx.save();
ctx.translate(250,250);
ctx.rotate(((hours+min/60)+sec/3600)*30*Math.PI/180);
ctx.moveTo(0,15);
ctx.lineTo(0,-100);
ctx.stroke();
ctx.restore();
ctx.closePath();
ctx.beginPath();
ctx.lineWidth = 4;
ctx.save();
ctx.translate(250,250);
ctx.rotate((min+sec/60)*6*Math.PI/180);
ctx.moveTo(0,15);
ctx.lineTo(0,-120);
ctx.stroke();
ctx.restore();
ctx.closePath();
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = '#f00';
ctx.save();
ctx.translate(250,250);
ctx.rotate(sec*6*Math.PI/180);
ctx.moveTo(0,15);
ctx.lineTo(0,-135);
ctx.stroke();
ctx.restore();
ctx.closePath();
}
setInterval(draw, 1000);
function f1(){
var date = new Date();
var year = fmtDate(date.getFullYear());//完整的年份
var month = fmtDate(date.getMonth()+1);// 7 月份从0开始
var day = fmtDate(date.getDate());// 号
var hours = fmtDate(date.getHours());
var min = fmtDate(date.getMinutes());
var sec = fmtDate(date.getSeconds());
var content = (year+'-'+month+'-'+day+' '+hours+':'+min+':'+sec);
document.getElementById('box').innerHTML = content;
}
// 每隔一秒执行一次函数
setInterval(f1,1000);
function fmtDate(v){
if(v < 10){
return '0'+v;
}
return v;
}
</script>
</body>
</html>http://www.virplus.com/thread-305.htm
转载请注明:2019-5-27 于 VirPlus 发表
