记一次用JavaScript和Jquery写闹钟,计时器并自动播放音乐的过程

  • 先上效果图

计时器

在这里插入图片描述

秒表

在这里插入图片描述

倒计时器

在这里插入图片描述

时钟

在这里插入图片描述部分代码:

//  获取时分秒的事件
	var myTime = "";
	function getShiFenMiao() {
		var year = $("#year option:selected").text();
		var month = $("#month option:selected").text();
		var day = $("#day option:selected").text();
		var reg = /^([0]|[1-9][0-9]*)$/
		var isShi = $("#isShi").val();
		var isFen = $("#isFen").val();
		var isMiao = $("#isMiao").val();
		
		var yearFormat = changeLength(year);
		var monthFormat = changeLength(month);
		var dayFormat = changeLength(day);
		var isShiFormat = changeLength(isShi);
		var isFenFormat = changeLength(isFen);
		var isMiaoFormat = changeLength(isMiao);
		
		if(!reg.test(isShi) || !reg.test(isFen) || !reg.test(isMiao) ){
			alert("请输入正整数!");
		}else{
			myTime = yearFormat+"-"+monthFormat+"-"+dayFormat+" "+isShiFormat+":"+isFenFormat+":"+isMiaoFormat;
			//console.log(myTime);
			window.c = setInterval(jiankongtime, 1000);
		}
	}
	
	function jiankongtime() {
		var nowTime = $("#time2").text();
		if(myTime == nowTime){
			window.clearInterval(c);
			document.getElementById("myaudio").play();
		}
	}
	// 获取当前时间
	function getDatetime() {
		var d = new Date();
		var year = d.getFullYear();
		var month = change(d.getMonth() + 1);
		var day = change(d.getDate());
		var hour = change(d.getHours());
		var minute = change(d.getMinutes());
		var second = change(d.getSeconds());
		var time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
				+ ':' + second;
		return time;
	}
	function change(t) {
		if (t < 10) {
			return "0" + t;
		} else {
			return t;
		}
	}
	function changeLength(t) {
		if (t.length == 1) {
			return "0" + t;
		} else {
			return t;
		}
	}

附上源码地址,有兴趣的可以一起探讨:https://gitee.com/schjava/MyTest.git

原创文章 123 获赞 50 访问量 3万+

猜你喜欢

转载自blog.csdn.net/weixin_39076203/article/details/106156916