html 指针型电子钟实现

最新推荐文章于 2024-08-01 16:15:33 发布

james_von

最新推荐文章于 2024-08-01 16:15:33 发布

阅读量277

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/james_von/article/details/130793872

版权

在html中实现一个可变化表盘以及指针型电子钟的动态页面，同时支持数字展示，使用时，可以根据具体情况进行裁剪，便于今后应用时模块化使用；

界面如上图；

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>简单实用原生js实现带表盘指针动态实时数字时钟特效代码</title>
<meta name="keywords" content="简单实用,原生js,表盘指针,动态,实时,数字时钟,特效代码">
<meta name="description" content="简单实用原生js实现带表盘指针动态实时数字时钟特效代码下载。"> 
<style>
		body{
			background-color:gray;
		}
		div{
			margin:auto;
			//width:500px;
            //position:absolute;
            //position: absolute;
            //left:50%;
            //top:50%;
            //margin-left:-250px;
            //margin-top:-250px;
		}
	  </style>
</head>
<body>
<!--div id="EClock" style="background:url('./js实现表盘指针/digitDial1.png') padding:50px 8px;font-family: 'Share Tech Mono', monospace;color: #000;text-shadow: 0 0 20px #000, 0 0 20px rgba(10, 175, 230, 0);width:342px;height:97px;"></div-->
<div id="EClock" style="background:url('./js实现表盘指针/digitDial2.png')no-repeat !important; padding:50px 8px;font-family: 'Share Tech Mono', monospace;background-color: #000;color: #FFF;text-shadow: 0 0 20px #FFF, 0 0 20px rgba(10, 175, 230, 0);width:342px;height:97px;"></div>
<div id="Clock1"></div>

<script src="./js实现表盘指针/jquery.js"></script>
<script src="./js实现表盘指针/index.js"></script>
<script>
	
/*var clock = Clock("Clock1",
	{
		width : 500,
		height : 500,
		clockDial : "./js实现表盘指针/clockDial1.png",
		hourHand : "./js实现表盘指针/hourHand1.png",
		minuteHand : "./js实现表盘指针/minuteHand1.png",
		secondHand : "./js实现表盘指针/secondHand1.png",
		handPosX : -22,
		handPosY : -221,
	}
	)//*/
/*var clock = Clock("Clock1",
	{
		width : 254,
		height : 254,
		clockDial : "./js实现表盘指针/clockDial2.png",
		hourHand : "./js实现表盘指针/hourHand2.png",
		minuteHand : "./js实现表盘指针/minuteHand2.png",
		secondHand : "./js实现表盘指针/secondHand2.png",
		handPosX : -127,
		handPosY : -127,
	}
	)//*/
var clock = Clock("Clock1",
	{
		width : 939,
		height : 939,
		clockDial : "./js实现表盘指针/clockDial3.png",
		hourHand : "./js实现表盘指针/hourHand3.png",
		minuteHand : "./js实现表盘指针/minuteHand3.png",
		secondHand : "./js实现表盘指针/secondHand3.png",
		handPosX : -469,
		handPosY : -469,
		zoom:0.5,
		trailler:425,
		textFont:"50px Helvetica Bold",
		textColor: 'red',
		textX: 469,
		textY: 626,
			dateFormat:"yyy年MM月dd日\r\nw",
	}
	)//*/
/*var clock = Clock("Clock1",
	{
		width : 720,
		height : 720,
		clockDial : "./js实现表盘指针/clockDial4.png",
		hourHand : "./js实现表盘指针/hourHand4.png",
		minuteHand : "./js实现表盘指针/minuteHand4.png",
		secondHand : "./js实现表盘指针/secondHand4.png",
		handPosX : -360,
		handPosY : -360,zoom:0.5,
			dateFormat:"yyyy年MM月dd日\r\nw\r\nhh:mm:ss",
	}
	)//*/
var eclock = DigitClock("EClock",
	{
			lines:[{dateFormat:"yyyy年MM月dd日 w",style : "font:20px MicrosoftYaHei Bold; letter-spacing: 0.1em; text-align:center;"},
			{dateFormat:"hh:mm:ss",style : "font:60px Helvetica Bold;letter-spacing: 0.05em; padding: 5px 0;text-align:center;"}]
	}
	)//*/
</script>

</body></html>

其中JavaScript文件内容如下：

function dateFormat(fmt, date) {
    let ret;
    const opt = {
        "y+": date.getFullYear().toString(),        // 年
        "M+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "h+": date.getHours().toString(),           // 时
        "m+": date.getMinutes().toString(),         // 分
        "s+": date.getSeconds().toString(),         // 秒
        "w+": "星期" + ("日一二三四五六".substr(date.getDay(),1))
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}
var Clock = function(id, options){
	var _Clock = function(id){
		this.von = id;
		this.opt ={
			width : 500,
			height : 500,
			clockDial : "/Images/clockDial.png",
			hourHand : "/Images/hourHand.png",
			minuteHand : "/Images/minuteHand.png",
			secondHand : "/Images/secondHand.png",
			handPosX : -22,
			handPosY : -221,
			zoom : 1,
			textFont:"25px Helvetica Bold",
			textColor: 'red',
			textX: 250,
			textY: 332,
			textAlign : 'center',
			dateFormat:"yyy年MM月dd日",
		}
		this.ctxBack;
		this.numBack;
		this.drawPin = function (clk, imgID, r) {
			var img = $('#' + clk.von + ' [data-kind="' + imgID + 'Hand"]')[0];
		  clk.ctxBack.save();
		  clk.ctxBack.translate(clk.opt["width"] / 2, clk.opt["height"] / 2);
		  clk.ctxBack.rotate(r);
		  clk.ctxBack.drawImage(img, clk.opt["handPosX"], clk.opt["handPosX"]);
		  clk.ctxBack.restore();
		}
		this.drawTime = function(clk, now, date, time){
	    clk.numBack.font = clk.opt["textFont"];
	    clk.numBack.fillStyle = clk.opt["textColor"];
	    clk.numBack.textAlign=clk.opt["textAlign"];
	    var ts = dateFormat(clk.opt["dateFormat"], now).split("\r\n");
	    for(var t in ts)
	    	clk.numBack.fillText(ts[t], clk.opt["textX"], clk.opt["textY"] + t * parseInt(clk.opt["textFont"]));
		}
		this.draw = function(clk) {
	    var now = new Date();
	    var time = now.toLocaleTimeString();
	    var mil = now.getMilliseconds();
	    var sec = now.getSeconds() + (mil / 1000);
	    var min = now.getMinutes() + (sec / 60);
	    var hrs = now.getHours() + (min / 60);
	    var day = now.getDay();
			var date = "日一二三四五六".substr(day,1);
			var img=$('#' + this.von + ' [data-kind="clockDial"]')[0];
			clk.numBack.drawImage(img,0,0);
			clk.drawPin(clk, "hour", hrs/6*Math.PI);
			clk.drawPin(clk, "minute",min/30*Math.PI);
			clk.drawPin(clk, "second",sec/30*Math.PI);
			clk.drawTime(clk, now, date, time);	//画时间位置
		}
		this.init = function(clk){
			$('#' + clk.von).append('<img data-kind="clockDial" src="' + clk.opt["clockDial"] + '" style="display:none" /><img data-kind="hourHand" src="' + clk.opt["hourHand"] + 
			'" style="display:none" /><img data-kind="minuteHand" src="' + clk.opt["minuteHand"] + '" style="display:none" /><img data-kind="secondHand" src="' + clk.opt["secondHand"] +
			'" style="display:none" /><canvas data-kind="cancas" width="'+clk.opt["width"] +'" height="'+clk.opt["height"] + '">');
			
			var canvas = $('#' + clk.von + ' [data-kind="cancas"]')[0];
			clk.ctxBack = canvas.getContext("2d");
			clk.numBack = canvas.getContext("2d");
			setInterval(function(){clk.draw(clk);}, 50);
		}
	}
	var result = new _Clock(id);
  // 合并系统选项
  for (key in options) {
  	result.opt[key] = options[key];
  }
  $('#' + result.von).css("width", result.opt["width"]);
  $('#' + result.von).css("height", result.opt["height"]);
  $('#' + result.von).css("zoom", result.opt["zoom"]);
  result.init(result);
	return result;
}
var DigitClock = function(id, options){
	var _DigitClock = function(id){
		this.von = id;
		this.opt ={
			lines:[{dateFormat:"yyyy年MM月dd日 w",style : "letter-spacing: 0.1em; font-size: 24px;"},
			{dateFormat:"hh:mm:ss",style : "letter-spacing: 0.05em; font-size: 80px; padding: 5px 0;"}]
		}
		this.draw=function(clk){
			var lines = clk.opt["lines"];
			var tags = $('#' + clk.von + ' div');
			for(var i in lines)
				$(tags[i]).text(dateFormat(lines[i].dateFormat, new Date()));
		}
		this.init = function(clk){
			var lines = clk.opt["lines"];
			for(var i in lines)
				$('#' + clk.von).append('<div style="' + lines[i].style + '"></div>');
			setInterval(function(){clk.draw(clk);}, 50);
		}
	}
	var result = new _DigitClock(id);
  // 合并系统选项
  for (key in options) {
  	result.opt[key] = options[key];
  }
  result.init(result);
	return result;
}

相关表盘以及指针的图片如下：