canvas_clock实现15款不同风格的canvas时钟效果代码-html代码-BFW代码库

canvas_clock实现15款不同风格的canvas时钟效果代码

代码语言：html

代码描述：canvas_clock实现15款不同风格的canvas时钟效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body{
	background: #494A5F;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}
a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
a:hover,a:focus{color:#74777b;text-decoration: none;}
.htmleaf-container{
	margin: 0 auto;
}
.zzsc-content{
	padding: 1em;
}
</style>

<link rel="stylesheet" type="text/css" href="css/zzsc.css">
</head>
<body>
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div class="zzsc-content">
	<canvas id="clock1_" width="200px" height="200px">
	</canvas>
	<canvas id="clock2_" width="200px" height="200px">
	</canvas>
	<canvas id="clock3_" width="200px" height="200px">
	</canvas>
	<canvas id="clock4_" width="200px" height="200px">
	</canvas>
	<canvas id="clock5_" width="200px" height="200px">
	</canvas>
	<canvas id="clock6_" width="200px" height="200px">
	</canvas>
	<canvas id="clock7_" width="200px" height="200px">
	</canvas>
	<canvas id="clock8_" width="200px" height="200px">
	</canvas>
	<canvas id="clock9_" width="200px" height="200px">
	</canvas>
	<canvas id="clock10_" width="200px" height="200px">
	</canvas>
	<canvas id="clock11_" width="200px" height="200px">
	</canvas>
	<canvas id="clock12_" width="200px" height="200px">
	</canvas>
	<canvas id="clock13_" width="200px" height="200px">
	</canvas>
	<canvas id="clock14_" width="200px" height="200px">
	</canvas>
	<canvas id="clock15_" width="200px" height="200px">
	</canvas>
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/canvas_clock.js"></script>
<script>
	  clockd1_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_24h": true,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd2_={
			  "indicate": true,
			  "dial1_color": "#666600",
			  "time_24h": true,
			  "timeoffset":0,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd3_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_24h": true,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd4_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd5_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_24h": true,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd6_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": "#666600",
			  "dial2_color": "#81812e",
			  "dial3_color": "#9d9d5c",
			  "time_add": 1,
			  "time_add_color": "#ccc",
			  "time_24h": true,
			  "timeoffset":0,
			  "date_add":3,
			  "date_add_color": "#999",
			 };
	  clockd7_={
			  "indicate": true,
			  "indicate_color": "#222",
			  "dial1_color": &quo.........完整代码请登录后点击上方下载按钮下载查看