1.效果图

2.说明:

2.1 代码是大神制作的,我进行修改,感谢大神,原创属于他。

2.2 我对代码进行分析、注释、整理,增加代码的可读性。

2.3 通过上述自己的工作,自己也能熟悉相关的JavaScript的相关知识。

2.4 最后还是要感谢,大神,感谢百度echarts,谢谢。

3.代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--标题,可自定义-->
<title>html和js的标准时钟</title>
<!--导入本地js文件或库或插件;也可以网络上,注意路径和目录-->
<script src='echarts.js'></script>
</head> <body>
<!--定义div容器,设置id,对显示图片大小设置-->
<div id="chart" style="width:800px;height:600px;"></div>
</body> <!--下面是js代码块,其实因为div里有id,所以还是将本js代码块放在body内-->
<script type="text/javascript">
// 初始化图表标签
var myChart = echarts.init(document.getElementById('chart')); /** 引用Cool_LYPMEN 模拟时钟修改而成
感谢大神制作!仅供学习
*/
// 以上是题头制作,百度的官网上很多代码不显示上面的,所有一般人不会弄到本地操作
// 在此仍要谢谢百度的开源,谢谢上面的大神分享代码
// option的设置很关键,有的前面加var,有的没有,没关系,但是等于号后面的大括号很重要
option =
{ // 关键的大括号,因为后面的setoption的位置就是它对应的右侧大括号的下面“};”
tooltip: //注意大括号的对应关系,特地放置好,否则要搞晕的,我就是这样的人
{
backgroundColor: '#fff',borderColor: '#f60',borderWidth: '1px',
textStyle: {color: '#333'},
formatter: function(param)
{
var time = Math.floor(param.value);
if(param.seriesIndex === 0){
return '<em style="color:' + param.color + ';">当前小时:' + time + '</em>'
}
if(param.seriesIndex === 1){
return '<em style="color:' + param.color + ';">当前星期:' + time + '</em>'
}
if(param.seriesIndex === 2){
return '<em style="color:' + param.color + ';">当前月份:' + time + '</em>'
}
if(param.seriesIndex === 4){
return '<em style="color:' + param.color + ';">当前小时:' + time + '</em>'
}
if(param.seriesIndex === 5){
return '<em style="color:' + param.color + ';">当前分钟:' + time + '</em>'
}
if(param.seriesIndex === 6){
return '<em style="color:' + param.color + ';">当前秒:' + time + '</em>'
}
}
},
// 画布的整体背景颜色的设置,#333是黑色,rgba(0,0,0,0.1)是灰色
backgroundColor: "rgba(0,0,0,0.1)",
series:
[
//////////----------小表盘24小时
{
name: '小时',type: 'gauge',center: ['28%', '50%'], // 默认全局居中
radius: '22%', //仪表盘半径
min: 0,max: 24,startAngle: 90,endAngle: -269.9999,splitNumber: 24,animation: 0,
//仪表盘指针
pointer: { show: 1,length: '90%',width: 3},
//仪表盘指针样式
itemStyle: { normal: {color: '#00b0b0',shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,shadowOffsetX: 2,shadowOffsetY: 2}
},
//仪表盘轴线样式
axisLine: {lineStyle: {color: [[1, '#337ab7']],width: 6}},
//分割线样式
splitLine: { length: 6,lineStyle: {width: 1}},
//仪表盘刻度样式
axisTick: { show: 0,splitNumber: 5, //分隔线之间分割的刻度数
length: 5, //刻度线长
lineStyle: {color: ['#ffffff']}
},
//刻度标签
axisLabel:
{show: 1,distance: 2, //标签与刻度线的距离
textStyle: {color: '#0000ff'},
formatter: function(t)
{
switch (t + '')
{case '0':return '';
case '1':return '';
case '2':return '';
case '3':return '3';
case '4':return '';
case '5':return '';
case '6':return '6';
case '7':return '';
case '8':return '';
case '9':return '9';
case '10':return '';
case '11':return '';
case '12':return '12';
case '13':return '';
case '14':return '';
case '15':return '15';
case '16':return '';
case '17':return '';
case '18':return '18';
case '19':return '';
case '20':return '';
case '21':return '21';
case '22':return '';
case '23':return '';
case '24':return '24';}
}
},
//仪表盘标题
title: { show: 1,offsetCenter: ['250%', '-250%'],textStyle: {color: '#333',fontSize: 24,fontWeight: 'bold'}},
//仪表盘显示数据
detail: { show: 0,formatter: '{value}',offsetCenter: [0, '60%']},
// 这里的北京时间,没有显示在表面上
data: [{name: '北京时间:\n'}]
}, //////////----------小表盘--星期设计,很好看,很重要
{
name: '星期',type: 'gauge',center: ['72%', '50%'], // 默认全局居中
radius: '22%', //仪表盘半径
min: 0,max: 7,startAngle: 90,endAngle: -269.9999,splitNumber: 7,animation: 0,
//仪表盘指针
pointer: { show: true,length: '80%',width: 3},
//仪表盘指针样式
itemStyle: {normal: {color: '#00b0b0',shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetX: 2,shadowOffsetY: 2}},
//仪表盘轴线样式
axisLine: {lineStyle: {color: [
[0.07, 'rgba(192, 0, 0, 0.5)'],
[0.21, 'rgba(0, 0, 192, 0.5)'],
[0.35, 'rgba(0, 64, 192, 0.5)'],
[0.50, 'rgba(0, 96, 192, 0.5)'],
[0.64, 'rgba(0, 164, 192, 0.5)'],
[0.78, 'rgba(0, 128, 64, 0.5)'],
[0.93, 'rgba(192, 128, 0, 0.5)'],
[1, 'rgba(192, 0, 0, 0.5)']
],width: 18}},
//分割线样式
splitLine: {show: 0,length: 18,lineStyle: {width: 1}},
axisTick: {show: 0},
//仪表盘刻度样式
//刻度标签
axisLabel: {show: 1,distance: -15, textStyle: {color: '#ffffff'},formatter: function(t) {return ''}},
title: {show: 0},
detail: {show: 0},
data: [{}],
z: 0
}, //////////----------小表盘--月份设计
{
name: '月份',type: 'gauge',center: ['50%', '72%'], // 默认全局居中
radius: '22%', min: 0,max: 12,startAngle: 90,endAngle: -269.9999,splitNumber: 12,animation: 0,
//仪表盘指针
pointer: { show: 1,length: '90%',width: 3},
//仪表盘指针样式
itemStyle: { normal: {color: '#00b0b0',shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetX: 2,shadowOffsetY: 2}},
//仪表盘轴线样式
axisLine: {lineStyle: {color: [[1, '#337ab7']],width: 6}},
//分割线样式
splitLine: {show: 1,length: 6,lineStyle: {width: 1}},
//仪表盘刻度样式
axisTick: {show: 0},
//刻度标签
axisLabel: { show: 1,distance: 1, textStyle: {color: '#0000ff',fontFamily: '宋体'},
formatter: function(t)
{
switch (t + '')
{case '2':return '2';
case '4':return '4';
case '6':return '6';
case '8':return '8';
case '10':return '10';
case '12':return '12';}}
},
//仪表盘显示数据
detail: {show: 0},
data: [{}]
}, //////////----------小表盘:日date的设置
// 下面不能设置name:“data”,否则报错
{
type: 'gauge',center: ['50%', '72%'], radius: '22%', animation: 0,
//仪表盘指针
pointer: {width: 0},
//仪表盘轴线样式
axisLine: {lineStyle: {show: 0,width: 0}},
//分割线样式
splitLine: {show: 0},
//仪表盘刻度样式
axisTick: {show: 0},
//刻度标签
axisLabel: {show: 0},
//仪表盘显示数据
detail: { show: 1,formatter: function(e) {if (e < 10) e = '0' + e;return e;},
offsetCenter: ['160%', 0],borderWidth: 2,borderColor: '#337ab7',
backgroundColor: '#fff',height: 20,width: 28,
textStyle: {color: '#f60',fontSize: 16,fontWeight: 'bold'},
},
data: [{}]
}, //////////----------大表盘的时针设置
{name: '小时',type: 'gauge',radius: '90%', min: 0,max: 12,startAngle: 90,endAngle: -269.9999,
splitNumber: 12,animation: 0,
//仪表盘指针
pointer: {length: '70%',width: 6},
//仪表盘指针样式
itemStyle: {normal: {color: '#109A39',shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetX: 2,shadowOffsetY: 2}},
//仪表盘轴线样式
axisLine: {show: 0,
lineStyle: {
color: [[1, '#337ab7']],
width: 10,shadowColor: 'rgba(0, 0, 0, 0.8)',shadowBlur: 12,shadowOffsetX: 3,shadowOffsetY: 3}
},
//分割线样式
splitLine: {length: 10,lineStyle: {width: 2}},
//仪表盘刻度样式
axisTick: {
show: true,splitNumber: 5, //分隔线之间分割的刻度数
length: 5, //刻度线长
lineStyle: {color: ['#ffffff']}
},
axisLabel: {show: 0},
//仪表盘标题
title: {show: 0},
//仪表盘显示数据
detail: {show: 0},
data: [{}]
}, //////////----------大表盘的分针设置
{
name: '分钟',type: 'gauge',radius: '90%', min: 0,max: 60,startAngle: 90,endAngle: -269.9999,
splitNumber: 12,animation: 0,
//仪表盘指针
pointer: {length: '85%',width: 6},
//仪表盘指针样式
itemStyle: {normal: {color: '#ca8622',shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetX: 2,shadowOffsetY: 2}},
//仪表盘轴线样式
axisLine: {show: 0,lineStyle: {width: 0}},
//分割线样式
splitLine: {length: 10,lineStyle: {width: 2}},
//仪表盘刻度样式,注意show的值=true=1;false=0
axisTick: {show: true,
splitNumber: 5, //分隔线之间分割的刻度数
length: 5, //刻度线长
lineStyle: {color: ['#ffffff']}},
//刻度标签
axisLabel: {show: 0},
//仪表盘标题
title: {show: 0},
//仪表盘显示数据
detail: {show: 0},
data: [{}]
}, //////////----------大表盘的秒针设置
{
name: '秒',type: 'gauge',radius: '90%', //仪表盘半径
min: 0,max: 60,startAngle: 90,endAngle: -269.9999,splitNumber: 12,animation: 0,
//仪表盘指针,注意'95%'=95,4='4%'
pointer: { show: true,length: '95%',width: 4},
//仪表盘指针样式,颜色设置的格式有2种:'#00b0b0'和'rgba(0, 0, 0, 0.8)'
itemStyle: {normal: {color: '#00b0b0',shadowColor: 'rgba(0, 0, 0, 0.8)',shadowBlur: 10,shadowOffsetX: 4,shadowOffsetY: 4}},
//仪表盘轴线样式
axisLine: {lineStyle: {color: [[1, '#337ab7']],width: 10}},
//分割线样式
splitLine: {length: 10,lineStyle: {width: 2}},
//仪表盘刻度样式
axisTick: { show: 1,splitNumber: 5, //分隔线之间分割的刻度数
length: 5,lineStyle: {color: ['#fff']}},
//刻度标签
axisLabel: {show: 1,distance: 6, //标签与刻度线的距离
textStyle: {fontWeight: 'bold',fontSize: 16},
formatter: function(t)
{switch (t + '')
{case '0':return '';
case '5':return '1';
case '10':return '2';
case '15':return '3';
case '20':return '4';
case '25':return '5';
case '30':return '6';
case '35':return '7';
case '40':return '8';
case '45':return '9';
case '50':return '10';
case '55':return '11';
case '60':return '12'}
}
},
//仪表盘标题
title: {show: 0},
//仪表盘显示数据
detail: { show: 0,formatter: '{value}',offsetCenter: [0, '60%']},
data: [{}]
}, //////////----------汉字星期的标注设置,经典
{
name: '汉字星期',type: 'pie',hoverAnimation: false,
center: ['72%', '50%'],radius: ['15%', '22.5%'],startAngle: 64.28,
label: {normal: {show: false,position: 'inside'}},
labelLine: {normal: {show: false}},
markPoint: {symbolSize: 1,
label: {normal: {show: true,
formatter: function(t){return t.name}
}
},
data:
[
{name: '星期日',x: '72%',y: '41%'},
{name: '星期一',x: '77.5%',y: '44.5%',label: {normal: {rotate: -51.42}}},
{name: '星期二',x: '78.7%',y: '52%',label: {normal: {rotate: -102.84}}},
{name: '星期三',x: '75%',y: '58.5%',label: {normal: {rotate: -154.28}}},
{name: '星期四',x: '69%',y: '58.5%',label: {normal: {rotate: -205.7}}},
{name: '星期五',x: '65.5%',y: '52%',label: {normal: {rotate: -257.12}}},
{name: '星期六',x: '66.8%',y: '44.2%',label: {normal: {rotate: 51.46}}}
]
},
data: [
{name: '星期日', value: 1},
{name: '星期一', value: 1},
{name: '星期二', value: 1},
{name: '星期三', value: 1},
{name: '星期四', value: 1},
{name: '星期五', value: 1},
{name: '星期六', value: 1},
],
z: 1
}// 汉字星期的标注的大括号是一对
] //中括号是和option下的series下的中括号是一对
}; // 这个大括号就是很重要的,是option下的大括号,前面有提到
// 因为它下面要跟着这个setoption,注意括号内的option,有时候前面是复数,注意前后统一
myChart.setOption(option); // 下面的设置是动画时钟的特有的,多谢大神 clearInterval(timeTicket);
var timeTicket = setInterval(function()
{
var datetime = new Date();
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1;
var date = datetime.getDate();
var h = datetime.getHours();
var m = datetime.getMinutes();
var s = datetime.getSeconds();
var week = datetime.getDay();
var ms = datetime.getMilliseconds();
var minutes = m + s / 60;
var hours_24 = h + m / 60;
var hours_12;
// 定义一天采用24小时制还是12小时制
if (hours_24 > 12){hours_12 = hours_24 - 12;}
else{hours_12 = hours_24;}
var seconds = s + ms / 1000;
var cur_mon = new Date(year, month, 0);
var cur_mon_count = cur_mon.getDate(); //当前月份总天数
var month = month + date / cur_mon_count;
if (month > 12){month = month - 12;}
var strmonth = datetime.getMonth() + 1;
var str = year + "-" + checktime(strmonth) + "-" + checktime(date) + " "+ checktime(h) + ":" + checktime(m) + ":" + checktime(s);
// 这里设置的文字‘北京时间’是显示在钟表面上的
option.series[0].data[0].name = '北京时间:\n' + str;
option.series[0].data[0].value = (hours_24).toFixed(2);
option.series[1].data[0].value = (week).toFixed(0);
option.series[2].data[0].value = (month).toFixed(2);
option.series[3].data[0].value = (date).toFixed(0);
option.series[4].data[0].value = (hours_12).toFixed(2);
option.series[5].data[0].value = (minutes).toFixed(2);
option.series[6].data[0].value = (seconds).toFixed(2);
myChart.setOption(option, true); // 注意这里也有一个动画特定的设置,突然有灵感了,发现以前自己有bug的地方,谢谢
// 整理代码,分析代码,注释代码也能学到很多东西,增加代码的可读性
}, 100); function checktime(str){if(str < 10){return '0' + str}return str} // 还是在js代码中,结尾别忘了
</script>
</html>

echarts制作html和JavaScript的时钟和代码分析与注释的更多相关文章

  1. JQuery html API支持解析执行Javascript脚本功能实现-代码分析

    JQuery html用法(功能类似innerHTML) 开发中需要使用Ajax技术来更新页面局部区域, 使用的方法是ajax获取html代码段(字符串),然后将这个html代码段作为参数,传入目标D ...

  2. 使用chart和echarts制作图表

      前  言 chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它可以帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina ...

  3. 使用ECharts制作图形时,如何设置指定图形颜色?

    使用ECharts制作图形时,图形颜色是默认的颜色,有时需求需要指定图形颜色,这就需要自己去设置. 在option下的series属性中设置itemStyle,如下所示: itemStyle: { n ...

  4. Echarts基于动态数据初步使用 及问题 代码记录.

    ECHARTS 插件 基本的动态数据展示(横向图) 下载 echarts.commn.min.js文件 在页面中进行引用, 并为Echarts图形准备一个div盒子 <!-- 引入插件 --&g ...

  5. 如何实现 javascript “同步”调用 app 代码

    在 App 混合开发中,app 层向 js 层提供接口有两种方式,一种是同步接口,一种一异步接口(不清楚什么是同步的请看这里的讨论).为了保证 web 流畅,大部分时候,我们应该使用异步接口,但是某些 ...

  6. 在线运行Javascript,Jquery,HTML,CSS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...

  7. linux新内核的时钟机制代码

    http://blog.chinaunix.net/uid-22810130-id-384173.html 如果说cfs是linux的一个很有创意的机制的话,那么linux中另一个创意就是nohz,我 ...

  8. 《Secrets of the JavaScript Ninja》:JavaScript 之运行时代码

    最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...

  9. javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数

    javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...

随机推荐

  1. 洛谷P3367 【模板】并查集 模板 找baba

    链接https://www.luogu.org/problem/P3367 #include<bits/stdc++.h> using namespace std; ; int fa[ra ...

  2. 如何在Windows上开启Ping或者禁止PING

    方法1:命令行模式 进入服务器后 点击 开始——运行 输入命令: netsh firewall set icmpsetting 8 这样就可以在外部ping到服务器了 非常简单实用! 同样道理,如果想 ...

  3. Spring Boot的Web配置

    一.使用YML文件配置多套环境    

  4. XSS挑战之旅,学习笔记

    第一关: http://test.ctf8.com/level1.php?name=test 观察到通过get方式传参有会显, 直接打最简单的xss playload: <script>a ...

  5. bat代码中判断 bat是否是以管理员权限运行,以及自动以管理员权限运行CMD BAT

    · bat 代码中判断bat是否是以管理员权限运行,以及自动以管理员权限运行CMD BAT 一.判断bat是否是以管理员权限运行 @echo off net.exe session >NUL & ...

  6. Redis5-集群搭建实验

    集群规划: nodeA:192.168.29.22(22-master,23-slave) nodeB:192.168.29.23(23-master,24-slave) nodeC:192.168. ...

  7. RS-232C

    RS-232C标准(协议)的全称是EIA-RS-232C标准,定义是"数据终端设备(DTE)和数据通讯设备(DCE)之间串行二进制数据交换接口技术标准".它是在1970年由美国电子 ...

  8. spring(三):DefaultListableBeanFactory

  9. hfs 文件存储

    hfs 服务器上面的和本地拖上去的文件是同一个文件.对本地文件拖上去之后再修改,服务器文件也会修改.所以服务器要有一个自己的文件存放.

  10. Dockers的安装

    添加yum源 #下载163的yum源到本地 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.163.com/.help/CentOS7 ...