1.效果图

2.说明：

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

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

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

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

3.代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--标题，可自定义-->
  6.     <title>html和js的标准时钟</title>
  7.     <!--导入本地js文件或库或插件；也可以网络上，注意路径和目录-->
  8.     <script src='echarts.js'></script>
  9. </head>
  10.  
  11. <body>
  12.     <!--定义div容器，设置id，对显示图片大小设置-->
  13.     <div id="chart" style="width:800px;height:600px;"></div>
  14. </body>
  15.  
  16. <!--下面是js代码块，其实因为div里有id，所以还是将本js代码块放在body内-->
  17. <script type="text/javascript">
  18.     // 初始化图表标签
  19.     var myChart = echarts.init(document.getElementById('chart'));
  20.  
  21. /** 引用Cool_LYPMEN 模拟时钟修改而成
  22. 感谢大神制作！仅供学习
  23. */
  24. // 以上是题头制作，百度的官网上很多代码不显示上面的，所有一般人不会弄到本地操作
  25. // 在此仍要谢谢百度的开源，谢谢上面的大神分享代码
  26. // option的设置很关键，有的前面加var，有的没有，没关系，但是等于号后面的大括号很重要
  27. option =
  28. { // 关键的大括号，因为后面的setoption的位置就是它对应的右侧大括号的下面“};”
  29.     tooltip: //注意大括号的对应关系，特地放置好，否则要搞晕的，我就是这样的人
  30.     {
  31.         backgroundColor: '#fff',borderColor: '#f60',borderWidth: '1px',
  32.         textStyle: {color: '#333'},
  33.         formatter: function(param)
  34.         {
  35.             var time = Math.floor(param.value);
  36.             if(param.seriesIndex === 0){
  37.               return '<em style="color:' + param.color + ';">当前小时:' + time + '</em>'
  38.             }
  39.             if(param.seriesIndex === 1){
  40.               return '<em style="color:' + param.color + ';">当前星期:' + time + '</em>'
  41.             }
  42.             if(param.seriesIndex === 2){
  43.               return '<em style="color:' + param.color + ';">当前月份:' + time + '</em>'
  44.             }
  45.             if(param.seriesIndex === 4){
  46.               return '<em style="color:' + param.color + ';">当前小时:' + time + '</em>'
  47.             }
  48.             if(param.seriesIndex === 5){
  49.               return '<em style="color:' + param.color + ';">当前分钟:' + time + '</em>'
  50.             }
  51.             if(param.seriesIndex === 6){
  52.               return '<em style="color:' + param.color + ';">当前秒:' + time + '</em>'
  53.             }
  54.         }
  55.     },
  56.     // 画布的整体背景颜色的设置，#333是黑色，rgba(0,0,0,0.1)是灰色
  57.     backgroundColor: "rgba(0,0,0,0.1)",
  58.     series:
  59.     [
  60.         //////////----------小表盘24小时
  61.         {
  62.         name: '小时',type: 'gauge',center: ['28%', '50%'], // 默认全局居中
  63.         radius: '22%', //仪表盘半径
  64.         min: 0,max: 24,startAngle: 90,endAngle: -269.9999,splitNumber: 24,animation: 0,
  65.         //仪表盘指针
  66.         pointer: { show: 1,length: '90%',width: 3},
  67.         //仪表盘指针样式
  68.         itemStyle: { normal: {color: '#00b0b0',shadowColor: 'rgba(0, 0, 0, 0.5)',
  69.                               shadowBlur: 10,shadowOffsetX: 2,shadowOffsetY: 2}
  70.                     },
  71.         //仪表盘轴线样式
  72.         axisLine: {lineStyle: {color: [[1, '#337ab7']],width: 6}},
  73.         //分割线样式
  74.         splitLine: { length: 6,lineStyle: {width: 1}},
  75.         //仪表盘刻度样式
  76.         axisTick: { show: 0,splitNumber: 5, //分隔线之间分割的刻度数
  77.                     length: 5, //刻度线长
  78.                     lineStyle: {color: ['#ffffff']}
  79.                   },
  80.         //刻度标签
  81.         axisLabel:
  82.          {show: 1,distance: 2, //标签与刻度线的距离
  83.           textStyle: {color: '#0000ff'},
  84.           formatter: function(t)
  85.           {
  86.             switch (t + '')
  87.             {case '0':return '';
  88.              case '1':return '';
  89.              case '2':return '';
  90.              case '3':return '3';
  91.              case '4':return '';
  92.              case '5':return '';
  93.              case '6':return '6';
  94.              case '7':return '';
  95.              case '8':return '';
  96.              case '9':return '9';
  97.              case '10':return '';
  98.              case '11':return '';
  99.              case '12':return '12';
  100.              case '13':return '';
  101.              case '14':return '';
  102.              case '15':return '15';
  103.              case '16':return '';
  104.              case '17':return '';
  105.              case '18':return '18';
  106.              case '19':return '';
  107.              case '20':return '';
  108.              case '21':return '21';
  109.              case '22':return '';
  110.              case '23':return '';
  111.              case '24':return '24';}
  112.           }
  113.          },
  114.         //仪表盘标题
  115.         title: { show: 1,offsetCenter: ['250%', '-250%'],textStyle: {color: '#333',fontSize: 24,fontWeight: 'bold'}},
  116.         //仪表盘显示数据
  117.         detail: { show: 0,formatter: '{value}',offsetCenter: [0, '60%']},
  118.         // 这里的北京时间，没有显示在表面上
  119.         data: [{name: '北京时间:\n'}]
  120.        },
  121.  
  122.        //////////----------小表盘--星期设计，很好看，很重要
  123.       {
  124.         name: '星期',type: 'gauge',center: ['72%', '50%'], // 默认全局居中
  125.         radius: '22%', //仪表盘半径
  126.         min: 0,max: 7,startAngle: 90,endAngle: -269.9999,splitNumber: 7,animation: 0,
  127.         //仪表盘指针
  128.         pointer: { show: true,length: '80%',width: 3},
  129.         //仪表盘指针样式
  130.         itemStyle: {normal: {color: '#00b0b0',shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetX: 2,shadowOffsetY: 2}},
  131.         //仪表盘轴线样式
  132.         axisLine: {lineStyle: {color: [
  133.                     [0.07, 'rgba(192, 0, 0, 0.5)'],
  134.                     [0.21, 'rgba(0, 0, 192, 0.5)'],
  135.                     [0.35, 'rgba(0, 64, 192, 0.5)'],
  136.                     [0.50, 'rgba(0, 96, 192, 0.5)'],
  137.                     [0.64, 'rgba(0, 164, 192, 0.5)'],
  138.                     [0.78, 'rgba(0, 128, 64, 0.5)'],
  139.                     [0.93, 'rgba(192, 128, 0, 0.5)'],
  140.                     [1, 'rgba(192, 0, 0, 0.5)']
  141.                            ],width: 18}},
  142.         //分割线样式
  143.         splitLine: {show: 0,length: 18,lineStyle: {width: 1}},
  144.         axisTick: {show: 0},
  145.         //仪表盘刻度样式
  146.         //刻度标签
  147.         axisLabel: {show: 1,distance: -15, textStyle: {color: '#ffffff'},formatter: function(t) {return ''}},
  148.         title: {show: 0},
  149.         detail: {show: 0},
  150.         data: [{}],
  151.         z: 0
  152.       }, 
  153.  
  154.       //////////----------小表盘--月份设计
  155.       {
  156.         name: '月份',type: 'gauge',center: ['50%', '72%'], // 默认全局居中
  157.         radius: '22%', min: 0,max: 12,startAngle: 90,endAngle: -269.9999,splitNumber: 12,animation: 0,
  158.         //仪表盘指针
  159.         pointer: { show: 1,length: '90%',width: 3},
  160.         //仪表盘指针样式
  161.         itemStyle: { normal: {color: '#00b0b0',shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetX: 2,shadowOffsetY: 2}},
  162.         //仪表盘轴线样式
  163.         axisLine: {lineStyle: {color: [[1, '#337ab7']],width: 6}},
  164.         //分割线样式
  165.         splitLine: {show: 1,length: 6,lineStyle: {width: 1}},
  166.         //仪表盘刻度样式
  167.         axisTick: {show: 0},
  168.         //刻度标签
  169.         axisLabel: { show: 1,distance: 1, textStyle: {color: '#0000ff',fontFamily: '宋体'},
  170.                      formatter: function(t)
  171.                        {
  172.                          switch (t + '')
  173.                           {case '2':return '2';
  174.                            case '4':return '4';
  175.                            case '6':return '6';
  176.                            case '8':return '8';
  177.                            case '10':return '10';
  178.                            case '12':return '12';}}
  179.                     },
  180.         //仪表盘显示数据
  181.         detail: {show: 0},
  182.         data: [{}]
  183.       },   
  184.  
  185.     //////////----------小表盘:日date的设置
  186.     // 下面不能设置name：“data”,否则报错
  187.      {
  188.         type: 'gauge',center: ['50%', '72%'], radius: '22%', animation: 0,
  189.         //仪表盘指针
  190.         pointer: {width: 0},
  191.         //仪表盘轴线样式
  192.         axisLine: {lineStyle: {show: 0,width: 0}},
  193.         //分割线样式
  194.         splitLine: {show: 0},
  195.         //仪表盘刻度样式
  196.         axisTick: {show: 0},
  197.         //刻度标签
  198.         axisLabel: {show: 0},
  199.         //仪表盘显示数据
  200.         detail: { show: 1,formatter: function(e) {if (e < 10) e = '0' + e;return e;},
  201.                   offsetCenter: ['160%', 0],borderWidth: 2,borderColor: '#337ab7',
  202.                   backgroundColor: '#fff',height: 20,width: 28,
  203.                   textStyle: {color: '#f60',fontSize: 16,fontWeight: 'bold'},
  204.                 },
  205.         data: [{}]
  206.      }, 
  207.  
  208.     //////////----------大表盘的时针设置
  209.      {name: '小时',type: 'gauge',radius: '90%', min: 0,max: 12,startAngle: 90,endAngle: -269.9999,
  210.       splitNumber: 12,animation: 0,
  211.       //仪表盘指针
  212.       pointer: {length: '70%',width: 6},
  213.       //仪表盘指针样式
  214.       itemStyle: {normal: {color: '#109A39',shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetX: 2,shadowOffsetY: 2}},
  215.       //仪表盘轴线样式
  216.       axisLine: {show: 0,
  217.             lineStyle: {
  218.                 color: [[1, '#337ab7']],
  219.                 width: 10,shadowColor: 'rgba(0, 0, 0, 0.8)',shadowBlur: 12,shadowOffsetX: 3,shadowOffsetY: 3}
  220.                        },
  221.       //分割线样式
  222.       splitLine: {length: 10,lineStyle: {width: 2}},
  223.       //仪表盘刻度样式
  224.       axisTick: {
  225.             show: true,splitNumber: 5, //分隔线之间分割的刻度数
  226.             length: 5, //刻度线长
  227.             lineStyle: {color: ['#ffffff']}
  228.                 },
  229.        axisLabel: {show: 0},
  230.        //仪表盘标题
  231.       title: {show: 0},
  232.        //仪表盘显示数据
  233.       detail: {show: 0},
  234.       data: [{}]
  235.      }, 
  236.  
  237.     //////////----------大表盘的分针设置
  238.     {
  239.         name: '分钟',type: 'gauge',radius: '90%', min: 0,max: 60,startAngle: 90,endAngle: -269.9999,
  240.         splitNumber: 12,animation: 0,
  241.         //仪表盘指针
  242.         pointer: {length: '85%',width: 6},
  243.         //仪表盘指针样式
  244.         itemStyle: {normal: {color: '#ca8622',shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetX: 2,shadowOffsetY: 2}},
  245.         //仪表盘轴线样式
  246.         axisLine: {show: 0,lineStyle: {width: 0}},
  247.         //分割线样式
  248.         splitLine: {length: 10,lineStyle: {width: 2}},
  249.         //仪表盘刻度样式，注意show的值=true=1；false=0
  250.         axisTick: {show: true,
  251.             splitNumber: 5, //分隔线之间分割的刻度数
  252.             length: 5, //刻度线长
  253.             lineStyle: {color: ['#ffffff']}},
  254.         //刻度标签
  255.         axisLabel: {show: 0},
  256.         //仪表盘标题
  257.         title: {show: 0},
  258.         //仪表盘显示数据
  259.         detail: {show: 0},
  260.         data: [{}]
  261.      }, 
  262.  
  263.     //////////----------大表盘的秒针设置
  264.     {
  265.         name: '秒',type: 'gauge',radius: '90%', //仪表盘半径
  266.         min: 0,max: 60,startAngle: 90,endAngle: -269.9999,splitNumber: 12,animation: 0,
  267.         //仪表盘指针,注意'95%'=95,4='4%'
  268.         pointer: { show: true,length: '95%',width: 4},
  269.         //仪表盘指针样式,颜色设置的格式有2种：'#00b0b0'和'rgba(0, 0, 0, 0.8)'
  270.         itemStyle: {normal: {color: '#00b0b0',shadowColor: 'rgba(0, 0, 0, 0.8)',shadowBlur: 10,shadowOffsetX: 4,shadowOffsetY: 4}},
  271.         //仪表盘轴线样式
  272.         axisLine: {lineStyle: {color: [[1, '#337ab7']],width: 10}},
  273.         //分割线样式
  274.         splitLine: {length: 10,lineStyle: {width: 2}},
  275.         //仪表盘刻度样式
  276.         axisTick: { show: 1,splitNumber: 5, //分隔线之间分割的刻度数
  277.                     length: 5,lineStyle: {color: ['#fff']}},
  278.         //刻度标签
  279.         axisLabel: {show: 1,distance: 6, //标签与刻度线的距离
  280.                     textStyle: {fontWeight: 'bold',fontSize: 16},
  281.                     formatter: function(t)
  282.                     {switch (t + '')
  283.                     {case '0':return '';
  284.                     case '5':return '1';
  285.                     case '10':return '2';
  286.                     case '15':return '3';
  287.                     case '20':return '4';
  288.                     case '25':return '5';
  289.                     case '30':return '6';
  290.                     case '35':return '7';
  291.                     case '40':return '8';
  292.                     case '45':return '9';
  293.                     case '50':return '10';
  294.                     case '55':return '11';
  295.                     case '60':return '12'}
  296.                     }
  297.                   },
  298.         //仪表盘标题
  299.         title: {show: 0},
  300.         //仪表盘显示数据
  301.         detail: { show: 0,formatter: '{value}',offsetCenter: [0, '60%']},
  302.         data: [{}]
  303.      },
  304.  
  305.     //////////----------汉字星期的标注设置，经典
  306.      {
  307.         name: '汉字星期',type: 'pie',hoverAnimation: false,
  308.         center: ['72%', '50%'],radius: ['15%', '22.5%'],startAngle: 64.28,
  309.         label: {normal: {show: false,position: 'inside'}},
  310.         labelLine: {normal: {show: false}},
  311.         markPoint: {symbolSize: 1,
  312.                     label: {normal: {show: true,
  313.                                      formatter: function(t){return t.name}
  314.                                      }
  315.                             },
  316.                     data:
  317.                     [
  318.                         {name: '星期日',x: '72%',y: '41%'},
  319.                         {name: '星期一',x: '77.5%',y: '44.5%',label: {normal: {rotate: -51.42}}},
  320.                         {name: '星期二',x: '78.7%',y: '52%',label: {normal: {rotate: -102.84}}},
  321.                         {name: '星期三',x: '75%',y: '58.5%',label: {normal: {rotate: -154.28}}},
  322.                         {name: '星期四',x: '69%',y: '58.5%',label: {normal: {rotate: -205.7}}},
  323.                         {name: '星期五',x: '65.5%',y: '52%',label: {normal: {rotate: -257.12}}},
  324.                         {name: '星期六',x: '66.8%',y: '44.2%',label: {normal: {rotate: 51.46}}}
  325.                     ]
  326.                     },
  327.         data: [
  328.             {name: '星期日', value: 1},
  329.             {name: '星期一', value: 1},
  330.             {name: '星期二', value: 1},
  331.             {name: '星期三', value: 1},
  332.             {name: '星期四', value: 1},
  333.             {name: '星期五', value: 1},
  334.             {name: '星期六', value: 1},
  335.               ],
  336.         z: 1
  337.      }// 汉字星期的标注的大括号是一对
  338.     ] //中括号是和option下的series下的中括号是一对
  339. }; // 这个大括号就是很重要的，是option下的大括号，前面有提到
  340. // 因为它下面要跟着这个setoption，注意括号内的option，有时候前面是复数，注意前后统一
  341. myChart.setOption(option);
  342.  
  343. // 下面的设置是动画时钟的特有的，多谢大神
  344.  
  345. clearInterval(timeTicket);
  346. var timeTicket = setInterval(function()
  347. {
  348.     var datetime = new Date();
  349.     var year = datetime.getFullYear();
  350.     var month = datetime.getMonth() + 1;
  351.     var date = datetime.getDate();
  352.     var h = datetime.getHours();
  353.     var m = datetime.getMinutes();
  354.     var s = datetime.getSeconds();
  355.     var week = datetime.getDay();
  356.     var ms = datetime.getMilliseconds();
  357.     var minutes = m + s / 60;
  358.     var hours_24 = h + m / 60;
  359.     var hours_12;
  360.     // 定义一天采用24小时制还是12小时制
  361.     if (hours_24 > 12){hours_12 = hours_24 - 12;}
  362.     else{hours_12 = hours_24;}
  363.     var seconds = s + ms / 1000;
  364.     var cur_mon = new Date(year, month, 0);
  365.     var cur_mon_count = cur_mon.getDate(); //当前月份总天数
  366.     var month = month + date / cur_mon_count;
  367.     if (month > 12){month = month - 12;}
  368.     var strmonth = datetime.getMonth() + 1;
  369.     var str = year + "-" + checktime(strmonth) + "-" + checktime(date) + " "+ checktime(h) + ":" + checktime(m) + ":" + checktime(s);
  370.     // 这里设置的文字‘北京时间’是显示在钟表面上的
  371.     option.series[0].data[0].name = '北京时间:\n' + str;
  372.     option.series[0].data[0].value = (hours_24).toFixed(2);
  373.     option.series[1].data[0].value = (week).toFixed(0);
  374.     option.series[2].data[0].value = (month).toFixed(2);
  375.     option.series[3].data[0].value = (date).toFixed(0);
  376.     option.series[4].data[0].value = (hours_12).toFixed(2);
  377.     option.series[5].data[0].value = (minutes).toFixed(2);
  378.     option.series[6].data[0].value = (seconds).toFixed(2);
  379.     myChart.setOption(option, true); // 注意这里也有一个动画特定的设置，突然有灵感了，发现以前自己有bug的地方，谢谢
  380.     // 整理代码，分析代码，注释代码也能学到很多东西，增加代码的可读性
  381. }, 100);
  382.  
  383. function checktime(str){if(str < 10){return '0' + str}return str}
  384.  
  385. // 还是在js代码中，结尾别忘了
  386. </script>
  387. </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. ubuntu set up 4 - 设置和软件

    1. Top Bar显示日期 https://askubuntu.com/questions/966576/customizing-tray-taskbar-date-display-in-ubunt ...

  2. RHEL/CentOS 7中Nginx的systemd service

    源码安装的nginx ,没有systemd service 管理 nginx 下面教程,告诉你如何设置nginx 的systemd service nginx systemd的服务文件是/usr/li ...

  3. [USACO08JAN] 手机网络 - 树形dp

    经典问题系列 覆盖半径\(1\)的最小点覆盖集 \(f[i][0]\) 表示不在此处建信号塔,但\(i\)及其子树都有信号 \(f[i][1]\) 表示在此处建信号塔,但\(i\)及其子树都有信号 \ ...

  4. [Python]Python日期格式和字符串格式相互转换

    由字符串格式转化为日期格式的函数为: datetime.datetime.strptime() 由日期格式转化为字符串格式的函数为: datetime.datetime.strftime() # en ...

  5. c语言该怎么入门?C语言入门教程(非常详细)

    C语言是一门面向过程的编译型语言,它的运行速度极快,仅次于汇编语言.C语言是计算机产业的核心语言,操作系统.硬件驱动.关键组件.数据库等都离不开C语言:不学习C语言,就不能了解计算机底层. 这套「C语 ...

  6. 用户登录（php）

    <!DOCTYPE HTML><html><head><meta charset="utf-8"><script type=& ...

  7. EF CodeFirst 之 Fluent API

    如何访问Fluent API: 在自定义上下文类中重写OnModelCreating方法,在方法内调用. 注:用法基本一样,配置类中的this就相当于modelBuilder.Entity<Pe ...

  8. Wannafly Camp 2020 Day 3C 无向图定向

    请你把无向图的每条边确定一个方向,使之成为一个DAG,并且最小化最长路的长度. #include <bits/stdc++.h> using namespace std; int n,m, ...

  9. c#数据筛选和排序

    一.TreeView SelectedNode    选中的节点            Level    节点的深度(从0开始)                AfterSelect    节点选中后 ...

  10. sftp，ftp文件下载

    一.sftp工具类 package com.ztesoft.iotcmp.util; import com.jcraft.jsch.ChannelSftp; import com.jcraft.jsc ...