qianran h5纯前端 简单做一个大小周计算器
公司实行大小周放假,经常因为节假日弄的有些混乱,在网上找一个样式很好看的时钟代码,加上日期和计算大小周,简单的制作一个大小周计算器.
大小周计算思路:选定某个是大周的周一,取当前时间戳减去选定的日期0点时间戳,模除两周的秒数,得出结果大于一周的秒数为小周,小于等于一周的秒数为大周.
代码比较简单,复制粘贴可用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>山东微亮 大小周计算器</title>
<style type="text/css">
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
:root {
--purple-dark: #5F546E;
--purple-light: #827593;
--gray-light: #E5E3E8;
--gray-dark: #A5A2A9;
--light: #fcf8fb;
--transition: all 150ms cubic-bezier(.46,1.13,.67,.87);
}
.clock-container {
width: 405px;
height: 150px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 35px 50px;
background-color: var(--purple-dark);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.825);
}
.clock-container span {
text-transform: uppercase;
font-size: 10px;
text-align: right;
display: block;
}
.clock-container p {
font-size: 60px;
color: var(--light);
font-weight: 100;
}
.clock-container p:first-letter {
letter-spacing: 5px;
}
.container {
width: 560px;
height: 320px;
display: block;
box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.215), -5px -5px 25px rgba(0, 0, 0, 0.125);
background-color: var(--gray-light);
position: relative;
}
.container .top {
font-size: 25pt;
width: 100%;
text-align: center;
justify-content: space-between;
margin-top: 30px;
}
.container .bottom {
height: 7px;
width: 100%;
position: absolute;
bottom: 0;
background-color: #aaa4b2;
}
.container .bottom .progress-bar {
width: 240px;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 9;
background-color: #615770;
transition: var(--transition);
}
.colon {
--size: 3px;
width: var(--size);
height: 15px;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
.colon::before {
content: '';
width: 100%;
height: var(--size);
background-color: #9892a3;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
.colon::after {
content: '';
width: 100%;
height: var(--size);
background-color: #9892a3;
position: absolute;
bottom: 0;
left: 0;
border-radius: 50%;
}
.toast {
width: 405px;
color: var(--light);
padding: 15px 24px;
background-color: var(--purple-dark);
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
transition: var(--transition);
z-index: 99;
}
.toast p {
font-weight: 400;
font-size: 18px;
}
.toast p:first-letter {
text-transform: uppercase;
}
.toast.show {
bottom: 50px;
}
.toast span {
align-self: center;
font-weight: 500;
cursor: pointer;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
color: var(--purple-light);
background-color: var(--purple-light);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.15;
position: relative;
}
</style>
</head>
<body>
<div class="toast" data-type="pause">
<p>时钟已停止。</p><span>关闭</span>
</div>
<div class="toast" data-type="live">
<p>时钟现在是实时的。</p><span>关闭</span>
</div>
<div class="container">
<div class="top" id="top">
</div>
<div class="clock-container">
<div class="hours"> <span>时</span>
<p id="hour">00</p>
</div>
<div class="colon"></div>
<div class="minutes"> <span>分</span>
<p id="minute">00</p>
</div>
<div class="colon"></div>
<div class="seconds"><span>秒</span>
<p id="second">00</p>
</div>
</div>
<div class="bottom">
<div class="progress-bar"></div>
</div>
</div>
</body>
<script type="text/javascript">
console.clear();
const hour = document.getElementById("hour");
const minute = document.getElementById("minute");
const second = document.getElementById("second");
const progress = document.querySelector(".progress-bar");
const pause = document.getElementById("pause");
const reset = document.getElementById("reset");
const toasts = document.getElementsByClassName("toast");
var interval;
[...toasts].forEach(toast => {
toast.addEventListener("click", hideToast);
});
function hideToast(e) {
const target = e.target;
if (target.tagName.toUpperCase() === "SPAN") {
target.parentNode.classList.remove("show");
}
}
function getCurrentTime() {
const d = new Date();
let h = d.getHours();
let min = d.getMinutes();
let sec = d.getSeconds();
h = h < 10 ? "0" + h : h;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
hour.textContent = h;
minute.textContent = min;
second.textContent = sec;
progress.style.width = +sec / 60 * 100 + "%";
}
function clearClass(className) {
for (let i = 0; i < toasts.length; i++) {
toasts[i].classList.remove(className);
}
}
interval = setInterval(getCurrentTime, 1000);
function getBigWeek(){
//获取大小周
var timestamp = Date.parse(new Date())/1000-1614528000;
if(timestamp%1209600<=604800){
return "?大周"
}else{
return "?小周"
}
}
function getDateWeek() {
todayDate = new Date();
date = todayDate.getDate();
month = todayDate.getMonth() + 1;
year = todayDate.getYear();
var dateweek = `<span style="font-size:5pt">`;
if (navigator.appName == "Netscape") {
dateweek = dateweek + (1900 + year) + "年" + month + "月" + date + "日 ";
}
if (navigator.appVersion.indexOf("MSIE") != -1) {
dateweek = dateweek + year + "年" + month + "月" + date + "日 ";
}
switch (todayDate.getDay()) {
case 0:
dateweek += "星期日";
break;
case 1:
dateweek += "星期一";
break;
case 2:
dateweek += "星期二";
break;
case 3:
dateweek += "星期三";
break;
case 4:
dateweek += "星期四";
break;
case 5:
dateweek += "星期五";
break;
case 6:
dateweek += "星期六";
break;
}
dateweek+="</span> "+getBigWeek()
return dateweek;
}
document.getElementById("top").innerHTML=getDateWeek()
</script>
</html>
