DW网页怎么设计一个时钟
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DW网页怎么设计一个时钟相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>使用canvas元素绘制指针式动画时钟</title>
<script type="text/javascript">
var canvas;
var context;
//页面装载
function window_onload()
canvas=document.getElementById("canvas");//获取canvas元素
context=canvas.getContext('2d');//获取canvas元素的图形上下文对象
setInterval("draw()",1000);//每隔一秒重绘时钟，重新显示时间
//绘制时钟
function draw()
var radius=Math.min(canvas.width / 2, canvas.height / 2) -25;//时钟罗盘半径
var centerx=canvas.width/2;//时钟中心横坐标
var centery=canvas.height/2;//时钟中心纵坐标
context.clearRect(0,0,canvas.width,canvas.height);//擦除之前所绘时钟
context.save();//保存当前绘制状态
//绘制时钟圆盘
context.fillStyle = '#efefef';//时钟背景色
context.strokeStyle = '#c0c0c0';//时钟边框颜色
context.beginPath();//开始创建路径
context.arc(centerx,centery,radius, 0,Math.PI*2, 0);//创建圆形罗盘路径
context.fill();//用背景色填充罗盘
context.stroke();//用边框颜色绘制罗盘边框
context.closePath();//关闭路径
context.restore();//恢复之前保存的绘制状态
//绘制时钟上表示小时的文字
var r = radius - 10;//缩小半径，因为要将文字绘制在时钟内部
context.font= 'bold 16px 宋体';//指定文字字体
Drawtext('1', centerx + (0.5 * r), centery - (0.88 * r));
Drawtext('2', centerx + (0.866 * r), centery - (0.5 * r));
Drawtext('3', centerx + radius - 10,centery);
Drawtext('4', centerx + (0.866 * r), centery + (0.5 * r));
Drawtext('5', centerx + (0.5 * r), centery + (0.866 * r));
Drawtext('6', centerx, centery + r);
Drawtext('7', centerx - (0.5 * r), centery + (0.866 * r));
Drawtext('8', centerx - (0.866 * r), centery + (0.49 * r));
Drawtext('9', centerx - radius + 10, centery);
Drawtext('10',centerx - (0.866 * r),centery - (0.50 * r));
Drawtext('11', centerx - (0.51 * r), centery - (0.88 * r));
Drawtext('12', centerx, 35);
//绘制时钟指针
var date=new Date();//获取需要表示的时间
var h = date.getHours();//获取当前小时
var m = date.getMinutes();//获取当前分钟
var s=date.getSeconds();//获取当前秒
var a = ((h/12) *Math.PI*2) - 1.57 + ((m / 60) * 0.524);//根据当前时间计算指针角度
context.save();//保存当前绘制状态
context.fillStyle='black'; //指定指针中心点的颜色
context.beginPath();//开始创建路径
context.arc(centerx,centery,3,0,Math.PI * 2, 0);//创建指针中心点的路径
context.closePath();//关闭路径
context.fill();//填充指针中心点
context.lineWidth=3;//指定指针宽度
context.fillStyle='darkgray';//指定指针填充颜色
context.strokeStyle='darkgray';//指定指针边框颜色
context.beginPath();//开始创建路径
//绘制小时指针
context.arc(centerx,centery,radius - 55, a + 0.01, a, 1);
context.lineTo(centerx,centery);
//绘制分钟指针
context.arc(centerx,centery,radius - 40, ((m/60) * 6.27) - 1.57, ((m/60) * 6.28) - 1.57, 0);
context.lineTo(canvas.width / 2, canvas.height / 2);
//绘制秒钟指针
context.arc(centerx,centery,radius - 30, ((s/60) * 6.27) - 1.57, ((s/60) * 6.28) - 1.57, 0);
context.lineTo(centerx,centery);
context.closePath();//关闭路径
context.fill();//填充指针
context.stroke();//绘制指针边框
context.restore();//恢复之前保存的绘制状态
//指定时钟下部当前时间所用的字符串，文字格式为hh:mm:dd
var hours = String(h);
var minutes = String(m);
var seconds = String(s);
if (hours.length == 1) h = '0' + h;
if (minutes.length == 1) m = '0' + m;
if (seconds.length == 1) s = '0' + s;
var str =h + ':' + m + ':' +s;
//绘制时钟下部的当前时间
Drawtext(str, centerx, centery + radius + 12);
function Drawtext(text, x, y)
//因为需要使用到坐标平移，所以在平移前线保存当前绘制状态
context.save();
x -= (context.measureText(text).width / 2);//文字起点横坐标
y +=9;//文字起点纵坐标
context.beginPath();//开始创建路径
context.translate(x, y);//平移坐标
context.fillText(text,0,0);//填充文字
context.restore();
</script>
<style>
div
display: -moz-box;
display: -webkit-box;
-moz-box-pack: center;
-webkit-box-pack: center;
width:100%;
canvas
background-color:white;
</style>
</head>
<body onload="window_onload()">
<div><h1>使用canvas元素绘制指针式动画时钟</h1></div>
<div><canvas id="canvas" width="200px" height="200px"></canvas><div>//这里就是你的时钟的位置。
</body>
</html> 参考技术A 你想做什么时钟，dw基本用js实现时钟功能的
紧急！求Dw高手帮我在网页呈现3个CSS：电脑显示，手机显示，打印输出
我已经做了网页和3个CSS，按老师给的代码和步骤做了切换按钮出来，但是，点击时却没有表现出来不同…完全纳闷…本人只学了三天DW，纯属小白，望高手通俗讲解。最好留下邮箱，以便我发送网页过去对症下药，直接交流，高分重赏，深情感谢*^o^*拒绝资金往来
369488523@qq.com追问抱歉，回晚了，有事耽搁了，现在我发给你，希望你能帮到我，十分感谢！
追答做好了 QQ:369488523
参考技术A 1715621095@qq.com以上是关于DW网页怎么设计一个时钟的主要内容，如果未能解决你的问题，请参考以下文章
关于用DW制作网页背景的基础问题，见问题补充，俺新手，谢谢哈
DW做的HTML登陆网页 SQL数据库 现在已经设计好了用户密码表和网页 怎样能验证数据库中密码并登陆成功
HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段