直接复制可用
代码：：：：：：：：：
<!DOCTYPE html>
<html lang="en"><head>
<script>
(function(){
const isDev = location.host.indexOf('code.juejin.cn') === -1;
if (typeof BigInt === 'function' && !BigInt.prototype.toJSON) {
BigInt.prototype.toJSON = function () {
return this + 'n';
};
}
// 解决 JSON.stringify 里有循环引用
const createCircularReplacer = () => {
const seen = new WeakSet();
return (key, value) => {
if (typeof value === 'object' && value !== null) {
if (seen.has(value)) {
return Object.prototype.toString.call(value);
}
seen.add(value);
}
return value;
};
};
function stringifyLog(...args) {
return args.map(arg => {
const prototypeString = Object.prototype.toString.call(arg);
try {
if (
arg &&
['[object Object]', '[object Array]'].includes(prototypeString)
) {
return JSON.stringify(arg, createCircularReplacer(), 2);
// arg 是基本类型
} else if (
arg === null ||
[
'string',
'boolean',
'number',
'symbol',
'undefined',
'bigint',
].includes(typeof arg)
) {
return String(arg);
} else if (arg?.toString) {
return arg.toString();
} else {
return prototypeString;
}
} catch (e) {
return prototypeString;
}
});
}
function stringifyError(error) {
if (!error) {
return '';
}
const stackInfo = error.stack?.toString() || '';
return stackInfo ? stackInfo : error.message+ '\n';
}
function sendMessage(type, ...args) {
if (window.parent !== window) {
window.parent.postMessage(
{
msgType: 'Console',
type,
value: stringifyLog(...args),
from: 'Runner'
},
isDev ? '*' : location.protocol + '//' + 'code.juejin.cn'
);
}
}
function logWindowOnError(event) {
let msg = event.message;
if (event.filename) {
msg += event.filename.replace(location.origin, '');
}
if (event.lineno || event.colno) {
msg += ':'+ event.lineno+ ':' + event.colno;
}
sendMessage('error', msg, stringifyError(event.error));
}
function logResourceError(event) {
const { target } = event;
if (
target &&
['link', 'video', 'script', 'img', 'audio'].includes(target.localName)
) {
const src = target.href || target.src || target.currentSrc || '';
sendMessage('error', 'GET <'+ target.localName + '> error: '+ src);
}
}
function logUnhandledRejection(event) {
const error = event?.reason ? event.reason : event;
sendMessage('error', 'Uncaught (in promise) ', {
name: error.name,
message: error.message,
stack: error.stack,
});
}
const handleConsoleMessage = (event) => {
const msg = event.data;
const expectedOrigin = location.protocol + '//' + 'code.juejin.cn';
// 确保消息来源是代码编辑器的 origin
if (!isDev && event.origin !== expectedOrigin) {
console.error(
'event origin ' + event.origin + ' is different from expected:' + expectedOrigin,
);
return;
}
if (msg?.msgType === 'Eval') {
const cmd = msg.data || '';
let result;
try {
result = window.eval('(' + cmd + ')');
} catch (e) {
try {
result = window.eval(cmd);
} catch (error) {
sendMessage('error', stringifyError(error));
}
}
setTimeout(() => {
if (result) {
sendMessage('log', ...stringifyLog(result));
}
});
}
}
(() => {
const supportType = ['log', 'info', 'warn', 'error', 'table'];
const oldConsoleMethod = {};
supportType.forEach(key => {
oldConsoleMethod[key] = window.console[key];
window.console[key] = (...args) => {
sendMessage(key, ...args);
oldConsoleMethod[key](...args);
};
});
window.addEventListener('error', logWindowOnError, true);
window.addEventListener('error', logResourceError, true);
window.addEventListener('unhandledrejection', logUnhandledRejection);
window.addEventListener('message', handleConsoleMessage);
})();
})();
</script>
<meta>
<style></style>
<script></script>
<link rel="" href="">
<title>使用 JavaScript 创建一个兔年春节倒数计时器</title></head>
<body>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
font-size: 62.5%;
font-family: "Montserrat", sans-serif;
font-weight: 300;
line-height: 1rem;
letter-spacing: 0.08rem;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
font-size: 1.4rem;
font-weight: inherit;
background: url("https://haiyong.site/img/bizhi/2301061.png" );
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
.container {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 20rem;
width: 60rem;
background-color: transparent;
border-radius: 3px;
box-shadow: none;
}
.clock-column {
margin-right: 7rem;
text-align: center;
position: relative;
background-color: #fff;
min-height: 160px;
min-width: 160px;
border-radius: 5px;
}
.clock-column::after {
content: ":";
display: block;
height: 0.25rem;
width: 0.25rem;
font-size: 75px;
font-weight: 200;
color: #feffff;
position: absolute;
top: 60px;
right: -25px;
}
.clock-column:last-child::after {
display: none;
}
.clock-column:last-child {
margin-right: 0;
}
.clock-label {
padding-top: 20px;
text-transform: uppercase;
color: #131313;
font-size: 16px;
text-align: center;
border-top: 2px solid rgba(6, 121, 215, 0.989);
}
.clock-timer {
color: #131313;
font-size: 46px;
line-height: 1;
}
.clock-input {
clear: both;
text-align: center;
max-width: 250px;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #fff;
margin: 0 auto 90px;
}
input#time-to {
padding: 5px;
border: 0;
border-radius: 3px;
font-size: 23px;
font-family: sans-serif;
text-align: center;
color: #066dcd;
background-color: #fff;
}
.done {
color: #fff;
font-weight: 600;
}
.page-footer {
position: fixed;
right: 0px;
bottom: 0px;
display: flex;
align-items: center;
padding: 5px;
color: black;
background: rgba(255, 255, 255, 0.65);
}
.page-left {
position: fixed;
left: 0px;
bottom: 0px;
display: flex;
align-items: center;
padding: 5px;
color: black;
background: rgba(255, 255, 255, 0.65);
}
.page-footer a {
display: flex;
margin-left: 4px;
}
.touxiang{
bottom: 0px;
width:30px;
height:30px;
}
</style>
<div class="clock-input">
<input type="date" name="time-to" class="time-to" id="time-to" value="" οnchange="calcTime(this.value)">
</div>
<div class="container">
<div class="clock-column">
<p class="clock-day clock-timer">D</p>
<p class="clock-label">日</p>
</div>
<div class="clock-column">
<p class="clock-hours clock-timer">O</p>
<p class="clock-label">时</p>
</div>
<div class="clock-column">
<p class="clock-minutes clock-timer">N</p>
<p class="clock-label">分</p>
</div>
<div class="clock-column">
<p class="clock-seconds clock-timer">E</p>
<p class="clock-label">秒</p>
</div>
</div>
<script>
// 加载事件监听器
loadEventListeners();
function loadEventListeners() {
// DOMContentLoaded事件在初始 HTML 文档已完全加载时触发
document.addEventListener('DOMContentLoaded', function() { calcTime(); });
};
var timeTo = document.getElementById('time-to').value,
date,
now = new Date(),
newYear = new Date('1.1.2023').getTime(),
startTimer = '';
// 计算日期、小时、分钟和秒
function calcTime(dates) {
//ui变量
clearInterval(startTimer);
if(typeof(dates) == 'undefined'){
date = new Date(newYear).getTime();
}else {
date = new Date(dates).getTime();
}
function updateTimer(date){
var now = new Date().getTime();
var distance = date - now;
// 天、小时、分钟和秒的时间计算
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// select元素
document.querySelector('.clock-day').innerHTML = days;
document.querySelector('.clock-hours').innerHTML = hours;
document.querySelector('.clock-minutes').innerHTML = minutes;
document.querySelector('.clock-seconds').innerHTML = seconds;
if(now >= date){
clearInterval(startTimer);
document.querySelector('.clock-day').innerHTML = 'D';
document.querySelector('.clock-hours').innerHTML = 'O';
document.querySelector('.clock-minutes').innerHTML = 'N';
document.querySelector('.clock-seconds').innerHTML = 'E';
}
}
startTimer = setInterval(function() { updateTimer(date); }, 1000);
}
</script>
</body></html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
