可以隨時開始暫停和更改時間流速的小頁面
阿新 • • 發佈：2018-12-28
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Time</title> <!-- 引入 echarts.js --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://echarts.baidu.com/dist/echarts.js"></script> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:600px;margin: 0 auto;"></div> <div class="btns" style="position: relative;left: 35%;"> <button type="button" class="btn btn-primary" style="width: 10%;margin: 0 auto;" onclick="stop()">stop</button> <button type="button" class="btn btn-primary" style="width: 10%;margin: 0 auto;" onclick="start()">start</button> <button type="button" class="btn btn-primary" style="width: 10%;margin: 0 auto;" onclick="reset()">reset</button> </div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); var dom = myChart.getDom(); myChart.getDom().style.width = "600px"; myChart.getDom().style.height = "600px"; myChart = echarts.init(dom); var option = { series: [{ ///////////////////////////////////////////////大表盤時針 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: 12, 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 } }, 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: { //儀表盤指標 show: true, length: '95%', width: 4 }, 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: { //儀表盤顯示資料 formatter: '', offsetCenter: [0, '60%'] }, data: [{}] }] }; myChart.setOption(option); var n = 6; var time = 0; var year = 1914, month = 7, date = 23, h = 0, m = 0, s = 0; function getDaysInOneMonth(year, month) { month = parseInt(month, 10); var d = new Date(year, month, 0); return d.getDate(); } var dates = getDaysInOneMonth(year, month); console.log(dates); function timeTicket() { s = s + 1; if(s >= 60) { s = 0; m = m + 1; //分鐘 } if(m >= 60) { m = 0; h = h + 1; //小時 } if(h >= 24) { h = 0; date = date + 1; //小時 } if(date > dates) { date = 1; month = month + 1; } if(month > 12) { month = month - 12; year = year + 1; } hours_24 = h + m / 60; if(hours_24 > 12) hours_12 = hours_24 - 12; else hours_12 = hours_24; minutes = m + s / 60; seconds = s; option.series[0].data[0].value = (hours_12).toFixed(2); option.series[1].data[0].value = (minutes / 5).toFixed(2); option.series[2].data[0].value = (seconds).toFixed(2); var daytxt = year + "年" + month + "月" + date + "日"; var timetxt = toDub(h) + ":" + toDub(m) + ":" + toDub(s); option.series[2].detail.formatter = daytxt + "\n" + timetxt; myChart.setOption(option, true); }; function reset() { //重置 clearInterval(time); h = m = s = 0; option.series[0].data[0].value = 0; option.series[1].data[0].value = 0; option.series[2].data[0].value = 0; var daytxt = year + "年" + month + "月" + date + "日"; var timetxt = toDub(h) + ":" + toDub(m) + ":" + toDub(s); option.series[2].detail.formatter = daytxt + "\n" + timetxt; myChart.setOption(option, true); } function start() { //開始 time = setInterval(timeTicket, 1000 / n); } function stop() { //暫停 clearInterval(time); } function toDub(n) { //補0操作 if(n < 10) { return "0" + n; } else { return "" + n; } } </script> </body> </html>
