css怎么样制作钟表

2023-04-08 22:04:01html-css034

css怎么样制作钟表,第1张

代码如下：

<!DOCTYPE html>

<head>

<title>canvas实例--制作时钟</title>

</head>

<body>

您的浏览器版本太低啦！可以换了！

</canvas>

//获取canvas

var canvas = document.getElementById("canvas")

//设置环境

var cxt = canvas.getContext("2d")

//制作时钟的函数

function DrawClock() {

//清除画布

cxt.clearRect(0,0,500,500)

//获取当前时间的时，分，秒

var now = new Date()

var hour = now.getHours()

var min = now.getMinutes()

var sec = now.getSeconds()

//小时必须获取浮点型（小时+分数--->转化为的小时）

hour = hour + min / 60

//将24小时转换为12小时

hour = hour >12 ? hour - 12 : hour

//制作表盘

cxt.beginPath()

cxt.lineWidth = 10

cxt.strokeStyle = "#ABCDEF"

cxt.arc(250, 250, 200, 0, 360, false)

cxt.stroke()

cxt.closePath()

//刻度

//时针

for (var i = 0i <12i++) {

cxt.save()

cxt.lineWidth = 7

cxt.strokeStyle = "red"

//设置0,0点

cxt.translate(250, 250)

//再设置旋转角度

cxt.rotate(i * 30 * Math.PI / 180)

cxt.beginPath()

cxt.moveTo(0, -170)

cxt.lineTo(0, -190)

cxt.closePath()

cxt.stroke()

cxt.restore()

}

//分针

for (var i = 0i <60i++) {

//为避免不同颜色的重叠，

//在时针刻度与分针刻度重叠的位置，不画分针

if (i % 5 == 0) continue

cxt.save()

//设置刻度粗细

cxt.lineWidth = 5

cxt.strokeStyle = "purple"

//设置画布的0,0点

cxt.translate(250, 250)

//设置旋转角度

cxt.rotate(i * 6 * Math.PI / 180)

//画分针刻度

cxt.beginPath()

cxt.moveTo(0, -180)

cxt.lineTo(0, -190)

cxt.closePath()

cxt.stroke()

cxt.restore()

}

//时针

cxt.save()

//设置时针风格

cxt.lineWidth = 7

cxt.strokeStyle = "pink"

//设置异次元空间的0,0点

cxt.translate(250, 250)

//设置旋转角度

cxt.rotate(hour * 30 * Math.PI / 180)

cxt.beginPath()

cxt.moveTo(0, -140)

cxt.lineTo(0, 10)

cxt.closePath()

cxt.stroke()

cxt.restore()

//分针

cxt.save()

//设置分针风格

cxt.lineWidth = 5

cxt.strokeStyle = "orange"

//设置异次元空间的0,0点

cxt.translate(250, 250)

//设置旋转角度

cxt.rotate(min * 6 * Math.PI / 180)

cxt.beginPath()

cxt.moveTo(0, -160)

cxt.lineTo(0, 15)

cxt.closePath()

cxt.stroke()

cxt.restore()

//秒针

cxt.save()

//风格

cxt.strokeStyle = "yellow"

cxt.lineWidth = 3

//重置0，0点

cxt.translate(250, 250)

//设置旋转角度

cxt.rotate(sec*6*Math.PI/180)

//画图

cxt.beginPath()

cxt.moveTo(0, -170)

cxt.lineTo(0, 20)

cxt.stroke()

//画出时针，分针，秒针的交叉点

cxt.beginPath()

cxt.arc(0, 0, 5, 0, 360, false)

cxt.closePath()

//设置填充样式

cxt.fillStyle = "blue"

cxt.fill()

//设置笔触样式--->秒针已设置

cxt.stroke()

//设置秒针前端的小圆点

cxt.beginPath()

cxt.arc(0, -150, 5, 0, 360, false)

cxt.closePath()

//设置填充样式

cxt.fillStyle = "blue"

cxt.fill()

//设置笔触样式

cxt.stroke()

cxt.closePath()

cxt.restore()

}

//调用函数

DrawClock()

//设置时钟转动起来

setInterval(DrawClock, 1000)

</script>

</body>

</html>

可以的，可以实时动态显示当前时间与当前日期，代码结构简洁、清晰、明了，（网络搜集，供参考）

知识的汇总：

1.HTML5

2.CSS3

3.JavaScript

重难点汇总：

1.各个指针的旋转角度的获取，首先要明确以下概念：

一周为360度、12小时、60分钟、60秒；

公式：一周的度数/一周的时间；

即得出时针每过一小时要旋转30度；

分针每过一分钟要旋转6度；

秒针每过一秒钟要旋转6度；

下面是代码部分：

HTML:

</div>

CSS3:

body{

background-color: #aaa

margin: 0px

padding: 0px

}

#box{

width: 400px

height: 400px

border-radius: 100%

background: url(img/4706.jpg_wh860.jpg)0px 0px no-repeat

background-size: 400px

position: absolute

left: 500px

top: 200px

}

#h{

width: 100px

height: 10px

background-color: red

position: relative

top: 195px

left: 200px

}

#min{

width: 140px

height: 10px

background-color: yellow

position: relative

top: 185px

left: 200px

}

#s{

width: 180px

height: 10px

background-color: blue

position: relative

top: 175px

left: 200px

}

.cen{

width: 10px

height: 10px

background-color: white

border-radius: 100%

}

#data{

position: relative

top: 100px

left: 150px

color: red

font-size: 20px

}

JavaScript:

function tim(){

var d = new Date(),//获取当前系统时间

year = d.getFullYear(),//得到当前年份

mon = d.getMonth(),//得到当前月份

date = d.getDate(), //得到当前日期

hours = d.getHours(), //得到当前小时

minutes = d.getMinutes(), //得到当前分钟

seconds = d.getSeconds()//得到当前秒

var hou = ""

if(hours>12){

hou = "下午"

}

else{

hou = "上午"

}

document.getElementById("data").innerHTML= year+"年"+mon+"月"+date+"日"+"

"+hou

var n = document.getElementById("s")//获取秒针ID

n.style.transform = "rotate("+(seconds*6-90)+"deg)"//通过当前秒数，得到秒针旋转度数

n.style.transformOrigin = "left"//设置秒针旋转的基点

var i = document.getElementById("min")//获取分针ID

i.style.transform = "rotate("+(minutes*6-90)+"deg)"//通过当前分钟数，得到分针旋转度数

i.style.transformOrigin = "left"//设置分针旋转的基点

var h = document.getElementById("h")//获取时针ID

h.style.transform = "rotate("+((hours*30)+(minutes*0.5)-90)+"deg)"//通过当前小时数，得到时针旋转度数

h.style.transformOrigin = "left"//设置时针旋转的基点

}

setInterval("tim()",1000)

一、.获取上下文对象

var cxt = document.getElementById(‘元素名’).getContect(‘2d’)

IE8或更早的浏览器不支持元素。

二、 drawClock() – 实现画时钟

1. clearRect() 清空给定矩形内的指定像素。

context.clearRect(x,y,width,height)

属性 | 值

-----|------------

x,y | 要清除的矩形左上角点的(x,y)坐标

width,height| 要清除的矩形宽度和高度，单位为像素12345

2.new Date() — 得到系统时间

var sec = now.getSeconds() var min = now.getMinutes() var hour = now.getHours() 123

3.画时钟的形状

cxt.beginPath() cxt.lineWidth = 10 cxt.strokeStyle = "blue" cxt.arc(550, 310, 300, 0, 360, false) cxt.closePath() cxt.stroke()123456

beginPath()的作用是canvas的绘制方法，都会以上一次beginPath之后的所有路径为基础进行绘制。

closepath()是关闭路径，而不是结束路径，它会试图从当前路径的终点连一条路径到七、起点，让整个路径闭合起来。

cxt.lineWidth() ：画笔的宽度

cxt.strokeStyle() : 设置或返回用于笔触的颜色、渐变或模式。

属性值：color 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。

gradient 用于填充绘图的渐变对象（线性或放射性）

pattern 用于创建 pattern 笔触的 pattern 对象

stroke ()绘制已定义的路径

arc() 方法创建弧/曲线（用于创建圆或部分圆）。如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

context.arc(x,y,r,sAngle,eAngle,counterclockwise)

参数

描述

x 圆的中心的 x 坐标。

y 圆的中心的 y 坐标。

r 圆的半径。

sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。

eAngle 结束角，以弧度计。

counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

4）drawScale — 自定义函数画刻度

function drawScale(size, width, color, value, startx, starty, endx, endy){

for(var i = 0i <sizei++){

drawPointer(width, color, value, i, startx, starty, endx, endy)

} } 12345

5. 画时钟刻度依托点

function drawPointer(width, color, value, angle, startx, starty, endx, endy){

cxt.save() //先保存当前画布

cxt.lineWidth = width //设置画笔的宽度

cxt.strokeStyle = color //设置画笔的颜色

cxt.translate(550, 310) //重置异次元空间的原点坐标

cxt.rotate(value * angle * Math.PI / 180) //设置旋转的角度，参数是弧度

cxt.beginPath()

cxt.moveTo(startx, starty)

cxt.lineTo(endx, endy)

cxt.closePath() //先闭合路径，再画线

cxt.stroke() //开始画线

cxt.restore() //将旋转后的线段返回给画布 } 12345678910111213

translate() 方法重新映射画布上的 (0,0) 位置。

JS代码如下：

//获取上下文文档对象 var clock = document.getElementById('clock')

var cxt = clock.getContext('2d')

//画指针 function drawPointer(width, color, value, angle, startx, starty, endx, endy){

cxt.save() //先保存当前画布

cxt.lineWidth = width //设置画笔的宽度

cxt.strokeStyle = color //设置画笔的颜色

cxt.translate(550, 310) //重置异次元空间的原点坐标

cxt.rotate(value * angle * Math.PI / 180) //设置旋转的角度，参数是弧度

cxt.beginPath()

cxt.moveTo(startx, starty)

cxt.lineTo(endx, endy)

cxt.closePath() //先闭合路径，再画线

cxt.stroke() //开始画线

cxt.restore() //将旋转后的线段返回给画布 }

//画刻度 function drawScale(size, width, color, value, startx, starty, endx, endy){

for(var i = 0i <sizei++){

drawPointer(width, color, value, i, startx, starty, endx, endy)

}

//为表盘的中心填充颜色 function drawFill(){

cxt.save()

cxt.beginPath()

cxt.arc(550, 310, 7, 0, 360, false)

cxt.closePath()

cxt.fillStyle = "red"

cxt.fill()

cxt.restore()

}

//画时钟 function drawClock(){

cxt.clearRect(0, 0, 1350, 620) //清空整个画布

var now = new Date() //获取系统时间，取出时,分,秒

var sec = now.getSeconds()

var min = now.getMinutes()

var hour = now.getHours()

min += sec / 60

hour += min / 60

if(hour >12) hour -= 12

cxt.beginPath()

cxt.lineWidth = 10

cxt.strokeStyle = "blue"

cxt.arc(550, 310, 300, 0, 360, false)

cxt.closePath()

cxt.stroke()

drawScale(12, 7, "pink", 30, 0, -280, 0, -260) //画时刻度

drawScale(60, 5, "pink", 6, 0, -280, 0, -270) //画分刻度

drawPointer(7, "purple", hour, 30, 0, 12, 0, -210) //画时针

drawPointer(5, "yellow", min, 6, 0, 15, 0, -240) //画分针

drawPointer(4, "red", sec, 6, 0, 17, 0, -250) //画秒针

//细化秒针,为秒针加箭头

drawPointer(3, "red", sec, 6, -7, -235, 0, -255)

drawPointer(3, "red", sec, 6, 7, -235, 0, -255)

drawFill()

}

drawClock()

setInterval(drawClock, 1000) //setInterval()方法中表示每隔1000ms，就执行drawClock一次 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：JS中Date日期函数中的参数使用介绍

# 下一篇：js 字符串与数字类型互换的方法

推荐阅读

热门文章

最新发布

标签列表

css怎么样制作钟表

给您推荐相同类型的内容：