Gua's Nest
Gaokao countdown automation
Meditly ComputerSavvyMedic
  2023-08-02 15:11:46   2024-01-12 08:06:44      1.2k Words  6 Mins
It has been 0 days since the last update of this post. Some contents may be outdated. Please pay attention to screening.

高考倒计时是一个可以显示距离高考的剩余时间和今天度过的百分比，提供明暗两种主题。

原有版本

Javascript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function getQueryVariable(variable){
	let query = window.location.search.substring(1);
	let vars = query.split("&");
	for (let i=0;i<vars.length;i++) {
			let pair = vars[i].split("=");
			if(pair[0] == variable){return pair[1];}
	}
	return(false);
}
window.addEventListener("load", () => {
    const day = document.querySelector(".day");
	const hour = document.querySelector(".hour");
	const minute = document.querySelector(".minute");
	const second = document.querySelector(".second");
	
	if(decodeURI(getQueryVariable("mode"))=="light") change(2);
	else change(1);

	const getTime = () => {
		var EndTime=new Date("2023/06/07 08:00");
		var name="2023高考";
if(getQueryVariable("date")==false||getQueryVariable("time")==false||getQueryVariable("name")==false) EndTime= new Date("2023/06/07 08:00"),name="2023高考";
		else EndTime= new Date(getQueryVariable("date")+" "+getQueryVariable("time")),name=decodeURI(getQueryVariable("name")); 
		document.getElementById("name").innerHTML="距离"+decodeURI(name)+"还有";
		document.getElementById("title").innerHTML=name+"倒计时";
        var NowTime = new Date();
        var t =EndTime.getTime() - NowTime.getTime();
		if(t<0) EndTime= new Date("2023/06/07 08:00"),name="2023高考",t =EndTime.getTime() - NowTime.getTime();
        const days = Math.floor(t/1000/60/60/24);
		day.innerHTML = days < 100 ? (days<10? "00"+days: "0"+days) : days;
		const hours = Math.floor(t/1000/60/60%24);
		hour.innerHTML = hours < 10 ? "0" + hours : hours;
		const minutes = Math.floor(t/1000/60%60);
		minute.innerHTML = minutes < 10 ? "0" + minutes : minutes;
		const seconds = Math.floor(t/1000%60);
		second.innerHTML = seconds < 10 ? "0" + seconds : seconds;
		var pass = Math.floor(((NowTime.getTime() / 1000) + 28800) % 86400) / 864;
    	pass = pass.toFixed(2); 
		document.getElementById("progress").value=pass;
		document.querySelector(".data>span").innerHTML=pass+" % ";
	};
	getTime();
	let timer = setInterval(() => {
		getTime();
	}, 1000);
});
function change(a){
    var css=document.getElementById("css");
    if (a == 1) {        css.setAttribute("href","https://codes.luyaoguagua.top/timer/css/night.css");
    }
    if (a == 2) {        css.setAttribute("href","https://codes.luyaoguagua.top/timer/css/light.css");
    }
}

问题

在该代码中，需要每年都修改下一年高考时间，否则就会出现倒计时为负的情况。

改进方法

通过固定高考的部分日期（/06/07 09:00），获取当前年份并判断今年高考是否已经进行，从而实现自动化。

更改后版本

Javascript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
function getQueryVariable(variable){
	let query = window.location.search.substring(1);
	let vars = query.split("&");
	for (let i=0;i<vars.length;i++) {
			let pair = vars[i].split("=");
			if(pair[0] == variable){return pair[1];}
	}
	return(false);
}
window.addEventListener("load", () => {
    const day = document.querySelector(".day");
	const hour = document.querySelector(".hour");
	const minute = document.querySelector(".minute");
	const second = document.querySelector(".second");	
	if(decodeURI(getQueryVariable("mode"))=="light") change(2);
	else change(1);
	const getTime = () => {
		var date_0=new Date;
 		var year_0=date_0.getFullYear(); 
 		var month_0=date_0.getMonth(); 
 		var day_0=date_0.getDate(); 
		if(month_0>6||(month_0=6&&day_0>6)){
			year_0=year_0+1;
		}
		var YMDT=year_0.toString()+"/06/07 09:00";
		var EndTime=new Date(YMDT);
		var name="高考";		if(getQueryVariable("date")==false||getQueryVariable("time")==false||getQueryVariable("name")==false) EndTime= new Date(YMDT),name="高考";
		else EndTime= new Date(getQueryVariable("date")+" "+getQueryVariable("time")),name=decodeURI(getQueryVariable("name")); 
		document.getElementById("name").innerHTML="距离"+decodeURI(name)+"还有";
		document.getElementById("title").innerHTML=name+"倒计时";
        var NowTime = new Date();
        var t =EndTime.getTime() - NowTime.getTime();		
		if(t<0) EndTime= new Date(YMDT),name="高考",t =EndTime.getTime() - NowTime.getTime();
        const days = Math.floor(t/1000/60/60/24);
		day.innerHTML = days < 100 ? (days<10? "00"+days: "0"+days) : days;     
		const hours = Math.floor(t/1000/60/60%24);
		hour.innerHTML = hours < 10 ? "0" + hours : hours;
		const minutes = Math.floor(t/1000/60%60);
		minute.innerHTML = minutes < 10 ? "0" + minutes : minutes;
		const seconds = Math.floor(t/1000%60);
		second.innerHTML = seconds < 10 ? "0" + seconds : seconds;
		var pass = Math.floor(((NowTime.getTime() / 1000) + 28800) % 86400) / 864;
    	pass = pass.toFixed(2); 
		document.getElementById("progress").value=pass;
		document.querySelector(".data>span").innerHTML=pass+" % ";
	};
	getTime();
	let timer = setInterval(() => {
		getTime();
	}, 1000);
});
function change(a){
    var css=document.getElementById("css");
    if (a == 1) {        css.setAttribute("href","https://codes.luyaoguagua.top/timer/css/night.css");
    }
    if (a == 2) {        css.setAttribute("href","https://codes.luyaoguagua.top/timer/css/light.css");
    }
}

用到的语法

var

1
2
3
4
5
6
var date_0=new Date;
var year_0=date_0.getFullYear(); 
var month_0=date_0.getMonth(); 
var day_0=date_0.getDate(); 
var YMDT=year_0.toString()+"/06/07 09:00";
var EndTime=new Date(YMDT);

这里要注意此处变量后有点加了_0，因为是后期修改代码，可能代码中存在代码冲突导致变量被意外赋值，注意后期修改对于变量的命名需要避免重复。

if

1
2
3
if(month_0>6||(month_0=6&&day_0>6)){
	year_0=year_0+1;
}

注意分情况讨论，如果不确定是否逻辑正确可以在运算完毕后使用

1
alert(YourVariable)

输出查看是否正确运算出了下一届高考时间。

&& 和 ||

运算符 描述 例子
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true

相较于 & 和 | ，上述运算符是效率较高的运行方式。

Gaokao countdown automation
Code/gaokao-countdown-automation.html
Author
Meditly
Published
2023-08-02 15:11
License
 Comments
Comment plugin failed to load
Loading comment plugin
  1. 1. 原有版本
    1. 1.1. Javascript代码
    2. 1.2. 问题
    3. 1.3. 改进方法
  2. 2. 更改后版本
    1. 2.1. Javascript代码
    2. 2.2. 用到的语法
      1. 2.2.1. var
      2. 2.2.2. if
      3. 2.2.3. && 和 ||
  1. 1. 原有版本
    1. 1.1. Javascript代码
    2. 1.2. 问题
    3. 1.3. 改进方法
  2. 2. 更改后版本
    1. 2.1. Javascript代码
    2. 2.2. 用到的语法
      1. 2.2.1. var
      2. 2.2.2. if
      3. 2.2.3. && 和 ||