友情提示 ：ico图标自行设置。
HTML
<div id="time_box">
<h3>距离
<div class="nian"><input type="number" oninput="if(value.length>4) value = value.slice(0, 4)" id="nian"></div> --
<div class="yue"><input type="number" oninput="if(value.length>2) value = value.slice(0, 2)" id="yue"></div> --
<div class="ri"><input type="number" oninput="if(value.length>2) value = value.slice(0, 2)" id="ri"></div>:
<div class="shi"><input type="number" oninput="if(value.length>2) value = value.slice(0, 2)" id="shi"></div>-
<div class="fen"><input type="number" oninput="if(value.length>2) value = value.slice(0, 2)" id="fen"></div>-
<div class="mss"><input type="number" oninput="if(value.length>2) value = value.slice(0, 2)" id="mss"></div>
结束， 还有
</h3>
<div class="day"></div>
<div class="time " id="showTime">
<div class="hours"></div>
<div class="minutes"></div>
<div class="seconds"></div>
</div>
</div>
<div id="timeover_box">
<canvas id="canvas"></canvas>
<div class="time_over">Time Over</div>
</div>
<div class="yl" id="yl"></div>
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#time_box {
display: block;
transition: all .5s ease-in-out;
background-color: antiquewhite;
width: 100%;
height: 100%;
}
.clearfix {
*zoom: 1;
}
.time {
width: 100%;
height: 50vh;
margin: 50px auto;
line-height: 30px;
text-align: center;
display: flex;
justify-content: space-around;
align-items: center;
}
h3 {
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
padding-top: 50px;
}
h3 input {
margin: 0 10px;
width: 80px;
height: 30px;
border-radius: 8px;
text-indent: 1em;
border: 2px solid #fff;
line-height: 30px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
h3 div {
position: relative;
}
h3 input:focus {
outline: none;
}
.nian::after,
.yue::after,
.ri::after,
.shi::after,
.fen::after,
.s::after {
content: "年";
position: absolute;
font-size: 14px;
display: inline-block;
top: 50%;
right: 20px;
transform: translateY(-50%);
text-align: center;
}
.yue::after {
content: "月";
}
.ri::after {
content: "日";
}
.shi::after {
content: "时";
}
.fen::after {
content: "分";
}
.s::after {
content: "秒";
}
.day {
font-size: 25px;
margin-top: 50px;
text-align: center;
}
.time .hours,
.time .minutes,
.time .seconds {
width: 20%;
height: 300px;
background-color: #000;
border-radius: 8px;
color: #ffffff;
font-weight: 700;
box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, .2);
font-size: 80px;
text-align: center;
line-height: 300px;
position: relative;
}
.tips {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 300px;
background-color: #000;
padding: 20px 0;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
font-size: 16px;
line-height: 1;
transition: all .5;
/* display: none; */
}
.tips span {
margin: 10px 0;
background-color: #000;
font-weight: 600;
color: #fff;
}
.tips_btn {
margin: 10px 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
background-color: #000;
}
.ss,
.look {
padding: 6px 25px;
border-radius: 8px;
background-color: #faebd7 !important;
letter-spacing: 1px;
cursor: pointer;
color: #000 !important;
}
.seconds {
display: flex;
flex-direction: column;
align-items: center;
}
.seconds span {
height: 300px;
background-color: #000;
}
#timeover_box {
display: none;
transition: all .5s ease-in-out;
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
}
#canvas {
width: 100%;
height: 100%;
}
.time_over {
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
color: red;
font-size: 60px;
z-index: 999;
}
.yl {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
display: none;
border-radius: 10px;
background-color: #000 !important;
color: #fff !important;
padding: 10px;
text-align: center;
}
倒计时JS
window.addEventListener('load', function () {
var day = document.querySelector('.day')
var hours = document.querySelector('.hours')
var minutes = document.querySelector('.minutes')
var seconds = document.querySelector('.seconds')
var setTime = ''
var d, h, m, s = ''
function countDown(time) {
var nowTime = +new Date(); // 返回当前时间总的毫秒数
var inputTime = +new Date(time); // 返回输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //剩余时间总的秒数
d = parseInt(times / 60 / 60 / 24).toString().padStart(2, '0') // 天
h = parseInt(times / 60 / 60 % 24).toString().padStart(2, '0') //时
m = parseInt(times / 60 % 60).toString().padStart(2, '0') // 分
s = parseInt(times % 60).toString().padStart(2, '0')// 当前的秒
day.innerHTML = d + '天'
hours.innerHTML = h + '时'
minutes.innerHTML = m + '分'
seconds.innerHTML = s + '秒'
}
//默认当天
let a = new Date().getFullYear();
let b = new Date().getMonth() + 1;
let c = new Date().getDate();
let xs = '18'
let fz = '00'
let ms = '00'
function clear(s = false) {
clearInterval(setTime)
setTime = setInterval(function () {
if (h == 00 && m == 00 && s == 00) {
clearInterval(setTime)
document.getElementById('time_box').style.display = 'none'
document.getElementById('timeover_box').style.display = 'block'
// setTimeout(function () { showCanvas() }, 10000)
showCanvas()
}
if (!s) {
countDown(`${a}-${b}-${c} ${xs}:${fz}:${ms}`)
} else {
countDown(`${nian.value}-${yue.value}-${ri.value} ${shi.value}:${fen.value}:${mss.value}`)
}
}, 1000)
}
clear()
// 设置
var nian = document.getElementById('nian')
var yue = document.getElementById('yue')
var ri = document.getElementById('ri')
var shi = document.getElementById('shi')
var fen = document.getElementById('fen')
var mss = document.getElementById('mss')
nian.value = a
yue.value = b
ri.value = c
shi.value = xs
fen.value = fz
mss.value = ms
nian.onblur = function () {
if (parseInt(nian.value) <= a) {
nian.value = a
}
if (parseInt(nian.value) - a >= 100) {
clearInterval(setTime)
day.innerHTML = '每当我打出 <span style="color:red">?</span> 的时候，不是我有问题，而是我觉得你有问题。'
hours.innerHTML = '瞎'
minutes.innerHTML = ' <div class="tips" id="tips"><span> 百年之后？</span> ' +
'<span> 你是想看自己的坟墓</span >' +
'<span>被人挖了吗？</span>' +
'<div class="tips_btn">' +
'<span class="ss" id="ss">算了</span>' +
'<span class="look" id="look">想看</span>' +
'</div> </div >'
seconds.innerHTML = '搞'
var ss = document.getElementById('ss')
var look = document.getElementById('look')
ss.onclick = function () { nian.value = ''; yue.value = ''; ri.value = ''; shi.value = ''; fen.value = ''; s.value = ''; clear() }
look.onclick = function () { clear(true) }
} else {
clear(true)
}
}
yue.onblur = function () {
if (parseInt(yue.value) <= b) {
yue.value = b
}
clear(true)
}
ri.onblur = function () {
if (parseInt(ri.value) <= c) {
ri.value = c
}
clear(true)
}
shi.onblur = function () {
if (parseInt(shi.value) == 24) {
fen.value = '00'
s.value = '00'
fen.setAttribute('disabled', true)
mss.setAttribute('disabled', true)
} else {
fen.setAttribute('disabled', false)
mss.setAttribute('disabled', false)
}
if (parseInt(shi.value) <= 0) {
shi.value = '00'
} else if (parseInt(shi.value) > 24) {
shi.value = '24'
fen.setAttribute('disabled', true)
mss.setAttribute('disabled', true)
}
clear(true)
}
fen.onblur = function () {
if (parseInt(fen.value) <= 0 || parseInt(fen.value) >= 59) {
fen.value = '00'
}
clear(true)
}
mss.onblur = function () {
if (parseInt(mss.value) <= 0 || parseInt(mss.value) >= 59) {
mss.value = '00'
}
clear(true)
}
})
禁止F12和鼠标右键 JS
var arr = [
'喂！住手啊，不要在按了!',
'十年添狗无人知，一朝风流天下识。',
'犹豫就会败北，真心就会白给。',
'人是猴变的，哪有不贱的。',
'好想谈一场，你妈拿一千万，让我离开你的恋爱呀。',
'没有人会一直爱你，但有人会一直爱你。',
'你真诚不一定会得到爱，但你不真诚一定会失去爱。',
'一日生活：上午讲正气，中午讲义气，下午讲手气，晚上讲力气。',
'贪财的风生水起，求爱的一事无成。',
'不管我之前交过多少个女朋友，只有你是我最爱的那一个。',
'总会有人代替我 没关系 也有人会代替你。',
'如果真的喜欢我，就不要从别人嘴里了解我',
'没有故意不回消息 只是你太重要了 我觉得回什么都配不上你。',
'如果我们之间有100步的距离，你只要走出第一步，后面的99步，就让我来走吧。',
'我赌盛淮南信我。丁水婧赌你不会解释。她赌赢了。我赌输了。',
'用钱追求的爱情，那就少花点感情。用感情追求的爱情，那就多花点钱',
'兄弟们记住我一句话，成年人的世界里，没有明确的回复，就是拒绝……',
'渣男最喜欢的就是，从细节去打败女人，因为细节是最省钱的方式',
'富士山没留住欲落的樱花，白山茶终没抵过红玫瑰',
'一个人维持两个人之间的感情，注定毫无意义',
'我停止了主动，我们的故事就结束了',
'那你呢？走出来了吗？开始接受新的人了吗？',
'我说喜欢你，又没说只喜欢你',
'钱是给女人看的，不是给女人花的',
'我就是想试一下，这强扭的瓜到底甜不甜',
'我已经够勇敢了，遗憾的人，不应该是我',
'冲一冲好友变老公 搏一搏妹妹变老婆。',
'我和别人聊骚是我的不对，但是你看我的手机就更加不对。',
'以为牵到了哥哥的手，就能得到哥哥的心; 却没想到哥哥是千手观音。',
'脚踏一条船 迟早得翻船，脚踏万条船 翻也翻不完。',
'在座的都是单身 叫我声宝贝怎么了。',
'没有故意不回消息 只是你太重要了 我觉得回什么都配不上你。',
'多处点对象怎么了 我打字快 又不是聊不过来。',
'大面积撒网 选择性捕捞。',
'只要新欢足够好 没有旧爱忘不了。',
'我是说喜欢他，但是我没说不搞暧昧。',
'留得鱼塘在 不怕没鱼钓。'
]
// f12
document.onkeydown = function (event) {
var arr_index = Math.floor(Math.random() * 37);
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 123) {
e.returnValue = false;
document.getElementById('yl').style.display = 'block'
document.getElementById('yl').innerText = arr[arr_index]
setTimeout(() => {
document.getElementById('yl').style.display = 'none'
}, 3000);
return (false);
}
}
// 右键
document.oncontextmenu = function () {
var arr_index = Math.floor(Math.random() * 37);
document.getElementById('yl').style.display = 'block'
document.getElementById('yl').innerText = arr[arr_index]
setTimeout(() => {
document.getElementById('yl').style.display = 'none'
}, 3000);
return false;
}
计时结束烟花JS
function showCanvas() {
function initVars() {
pi = Math.PI;
console.log(canvas)
ctx = canvas.getContext("2d");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
cx = canvas.width / 2;
cy = canvas.height / 2;
playerZ = -25;
playerX = playerY = playerVX = playerVY = playerVZ = pitch = yaw = pitchV = yawV = 0;
scale = 600;
seedTimer = 0; seedInterval = 5, seedLife = 100; gravity = .02;
seeds = new Array();
sparkPics = new Array();
s = "https://cantelope.org/NYE/";
for (i = 1; i <= 10; ++i) {
sparkPic = new Image();
// sparkPic.src = s + "spark" + i + ".png";
sparkPics.push(sparkPic);
}
sparks = new Array();
// pow1 = new Audio(s + "pow1.ogg");
// pow2 = new Audio(s + "pow2.ogg");
// pow3 = new Audio(s + "pow3.ogg");
// pow4 = new Audio(s + "pow4.ogg");
frames = 0;
}
function rasterizePoint(x, y, z) {
var p, d;
x -= playerX;
y -= playerY;
z -= playerZ;
p = Math.atan2(x, z);
d = Math.sqrt(x * x + z * z);
x = Math.sin(p - yaw) * d;
z = Math.cos(p - yaw) * d;
p = Math.atan2(y, z);
d = Math.sqrt(y * y + z * z);
y = Math.sin(p - pitch) * d;
z = Math.cos(p - pitch) * d;
var rx1 = -1000, ry1 = 1, rx2 = 1000, ry2 = 1, rx3 = 0, ry3 = 0, rx4 = x, ry4 = z, uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);
if (!uc) return { x: 0, y: 0, d: -1 };
var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;
var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;
if (!z) z = .000000001;
if (ua > 0 && ua < 1 && ub > 0 && ub < 1) {
return {
x: cx + (rx1 + ua * (rx2 - rx1)) * scale,
y: cy + y / z * scale,
d: Math.sqrt(x * x + y * y + z * z)
};
} else {
return {
x: cx + (rx1 + ua * (rx2 - rx1)) * scale,
y: cy + y / z * scale,
d: -1
};
}
}
function spawnSeed() {
seed = new Object();
seed.x = -50 + Math.random() * 100;
seed.y = 25;
seed.z = -50 + Math.random() * 100;
seed.vx = .1 - Math.random() * .2;
seed.vy = -1.5;//*(1+Math.random()/2);
seed.vz = .1 - Math.random() * .2;
seed.born = frames;
seeds.push(seed);
}
function splode(x, y, z) {
t = 5 + parseInt(Math.random() * 150);
sparkV = 1 + Math.random() * 2.5;
type = parseInt(Math.random() * 3);
switch (type) {
case 0:
pic1 = parseInt(Math.random() * 10);
break;
case 1:
pic1 = parseInt(Math.random() * 10);
do { pic2 = parseInt(Math.random() * 10); } while (pic2 == pic1);
break;
case 2:
pic1 = parseInt(Math.random() * 10);
do { pic2 = parseInt(Math.random() * 10); } while (pic2 == pic1);
do { pic3 = parseInt(Math.random() * 10); } while (pic3 == pic1 || pic3 == pic2);
break;
}
for (m = 1; m < t; ++m) {
spark = new Object();
spark.x = x; spark.y = y; spark.z = z;
p1 = pi * 2 * Math.random();
p2 = pi * Math.random();
v = sparkV * (1 + Math.random() / 6)
spark.vx = Math.sin(p1) * Math.sin(p2) * v;
spark.vz = Math.cos(p1) * Math.sin(p2) * v;
spark.vy = Math.cos(p2) * v;
switch (type) {
case 0: spark.img = sparkPics[pic1]; break;
case 1:
spark.img = sparkPics[parseInt(Math.random() * 2) ? pic1 : pic2];
break;
case 2:
switch (parseInt(Math.random() * 3)) {
case 0: spark.img = sparkPics[pic1]; break;
case 1: spark.img = sparkPics[pic2]; break;
case 2: spark.img = sparkPics[pic3]; break;
}
break;
}
spark.radius = 25 + Math.random() * 50;
spark.alpha = 1;
spark.trail = new Array();
sparks.push(spark);
}
pow = new Audio(`${s}pow${~~(Math.random() * 4)}.ogg`);
// switch(parseInt(Math.random()*4)){
// case 0: pow=new Audio(s+"pow1.ogg"); break;
// case 1: pow=new Audio(s+"pow2.ogg"); break;
// case 2: pow=new Audio(s+"pow3.ogg"); break;
// case 3: pow=new Audio(s+"pow4.ogg"); break;
// }
d = Math.sqrt((x - playerX) * (x - playerX) + (y - playerY) * (y - playerY) + (z - playerZ) * (z - playerZ));
pow.volume = 1.5 / (1 + d / 10);
// pow.play();
}
function doLogic() {
if (seedTimer < frames) {
seedTimer = frames + seedInterval * Math.random() * 10;
spawnSeed();
}
for (i = 0; i < seeds.length; ++i) {
seeds[i].vy += gravity;
seeds[i].x += seeds[i].vx;
seeds[i].y += seeds[i].vy;
seeds[i].z += seeds[i].vz;
if (frames - seeds[i].born > seedLife) {
splode(seeds[i].x, seeds[i].y, seeds[i].z);
seeds.splice(i, 1);
}
}
for (i = 0; i < sparks.length; ++i) {
if (sparks[i].alpha > 0 && sparks[i].radius > 5) {
sparks[i].alpha -= .01;
sparks[i].radius /= 1.02;
sparks[i].vy += gravity;
point = new Object();
point.x = sparks[i].x;
point.y = sparks[i].y;
point.z = sparks[i].z;
if (sparks[i].trail.length) {
x = sparks[i].trail[sparks[i].trail.length - 1].x;
y = sparks[i].trail[sparks[i].trail.length - 1].y;
z = sparks[i].trail[sparks[i].trail.length - 1].z;
d = ((point.x - x) * (point.x - x) + (point.y - y) * (point.y - y) + (point.z - z) * (point.z - z));
if (d > 9) {
sparks[i].trail.push(point);
}
} else {
sparks[i].trail.push(point);
}
if (sparks[i].trail.length > 5) sparks[i].trail.splice(0, 1);
sparks[i].x += sparks[i].vx;
sparks[i].y += sparks[i].vy;
sparks[i].z += sparks[i].vz;
sparks[i].vx /= 1.075;
sparks[i].vy /= 1.075;
sparks[i].vz /= 1.075;
} else {
sparks.splice(i, 1);
}
}
p = Math.atan2(playerX, playerZ);
d = Math.sqrt(playerX * playerX + playerZ * playerZ);
d += Math.sin(frames / 80) / 1.25;
t = Math.sin(frames / 200) / 40;
playerX = Math.sin(p + t) * d;
playerZ = Math.cos(p + t) * d;
yaw = pi + p + t;
}
function rgb(col) {
var r = parseInt((.5 + Math.sin(col) * .5) * 16);
var g = parseInt((.5 + Math.cos(col) * .5) * 16);
var b = parseInt((.5 - Math.sin(col) * .5) * 16);
return "#" + r.toString(16) + g.toString(16) + b.toString(16);
}
function draw() {
ctx.clearRect(0, 0, cx * 2, cy * 2);
ctx.fillStyle = "#ff8";
for (i = -100; i < 100; i += 3) {
for (j = -100; j < 100; j += 4) {
x = i; z = j; y = 25;
point = rasterizePoint(x, y, z);
if (point.d != -1) {
size = 250 / (1 + point.d);
d = Math.sqrt(x * x + z * z);
a = 0.75 - Math.pow(d / 100, 6) * 0.75;
if (a > 0) {
ctx.globalAlpha = a;
ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
}
}
}
}
ctx.globalAlpha = 1;
for (i = 0; i < seeds.length; ++i) {
point = rasterizePoint(seeds[i].x, seeds[i].y, seeds[i].z);
if (point.d != -1) {
size = 200 / (1 + point.d);
ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
}
}
point1 = new Object();
for (i = 0; i < sparks.length; ++i) {
point = rasterizePoint(sparks[i].x, sparks[i].y, sparks[i].z);
if (point.d != -1) {
size = sparks[i].radius * 200 / (1 + point.d);
if (sparks[i].alpha < 0) sparks[i].alpha = 0;
if (sparks[i].trail.length) {
point1.x = point.x;
point1.y = point.y;
switch (sparks[i].img) {
case sparkPics[0]: ctx.strokeStyle = "#f84"; break;
case sparkPics[1]: ctx.strokeStyle = "#84f"; break;
case sparkPics[2]: ctx.strokeStyle = "#8ff"; break;
case sparkPics[3]: ctx.strokeStyle = "#fff"; break;
case sparkPics[4]: ctx.strokeStyle = "#4f8"; break;
case sparkPics[5]: ctx.strokeStyle = "#f44"; break;
case sparkPics[6]: ctx.strokeStyle = "#f84"; break;
case sparkPics[7]: ctx.strokeStyle = "#84f"; break;
case sparkPics[8]: ctx.strokeStyle = "#fff"; break;
case sparkPics[9]: ctx.strokeStyle = "#44f"; break;
}
for (j = sparks[i].trail.length - 1; j >= 0; --j) {
point2 = rasterizePoint(sparks[i].trail[j].x, sparks[i].trail[j].y, sparks[i].trail[j].z);
if (point2.d != -1) {
ctx.globalAlpha = j / sparks[i].trail.length * sparks[i].alpha / 2;
ctx.beginPath();
ctx.moveTo(point1.x, point1.y);
ctx.lineWidth = 1 + sparks[i].radius * 10 / (sparks[i].trail.length - j) / (1 + point2.d);
ctx.lineTo(point2.x, point2.y);
ctx.stroke();
point1.x = point2.x;
point1.y = point2.y;
}
}
}
ctx.globalAlpha = sparks[i].alpha;
ctx.drawImage(sparks[i].img, point.x - size / 2, point.y - size / 2, size, size);
}
}
}
function frame() {
if (frames > 100000) {
seedTimer = 0;
frames = 0;
}
frames++;
draw();
doLogic();
requestAnimationFrame(frame);
}
window.addEventListener("resize", () => {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
cx = canvas.width / 2;
cy = canvas.height / 2;
});
initVars();
frame();
}
烟花页面点击返回倒计时JS
var overBox = document.getElementById('timeover_box')
overBox.onclick = function () {
document.getElementById('time_box').style.display = 'block'
document.getElementById('timeover_box').style.display = 'none'
}
写的不好，轻点喷（(o)/~）
大佬们 看看怎么加动画特效
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
