纪念日计时器
2022/1/10 6:07:17
本文主要是介绍纪念日计时器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
修改位置
请在177行修改目标时间,以及目标时间名字
200行修改过去时间想说的话
205行修改未来时间想说的话
代码内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>遇</title>
<!-- 这是网页标题 -->
<style>
body {
overflow: hidden;
margin: 0;
background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11695386033%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643859661&t=56c2c6c10490dd71ced649cc1dc90ac0);
background-size: 100% 100%;
}
h1 {
position: fixed;
top: 30%;
left: 0;
width: 100%;
text-align: center;
transform: translateY(-50%);
font-family: 'Love Ya Like A Sister', cursive;
font-size: 60px;
color: #000000;
padding: 0 20px;
}
h1 span {
position: fixed;
left: 0;
width: 100%;
text-align: center;
margin-top: 30px;
font-size: 40px;
}
h2 {
position: fixed;
top: 30%;
left: 0;
width: 100%;
text-align: center;
transform: translateY(-50%);
font-family: 'Love Ya Like A Sister', cursive;
font-size: 60px;
padding: 0 20px;
color: #ff0000;
}
</style>
</head>
<body>
<!-- 请在177行修改目标时间,以及目标时间名字 -->
<!-- 200行修改过去时间想说的话 -->
<!-- 205行修改未来时间想说的话 -->
<h1 id="h1"></h1>
<canvas></canvas>
<!--canvas 画布-->
<script>
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");
var ww, wh;
function onResize() {
ww = canvas.width = window.innerWidth;
wh = canvas.height = window.innerHeight;
};
function col() {
var h = parseInt(Math.random() * 100 + 150);
var s = parseInt(Math.random() * 5 + 80);
var l = parseInt(Math.random() * 5 + 80);
var a = (Math.random() * 0.2 + 0.7).toFixed(2);
return `hsla(` + h + `,` + s + `%,` + l + `%,` + a + `)`;
};
var c = col;
ctx.strokeStyle = "red";
ctx.shadowBlur = 25;
ctx.shadowColor = c;
var precision = 100;
var hearts = [];
var mouseMoved = false;
function onMove(e) {
mouseMoved = true;
if (e.type === "touchmove") {
hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
} else {
hearts.push(new Heart(e.clientX, e.clientY));
hearts.push(new Heart(e.clientX, e.clientY));
}
}
var Heart = function (x, y) {
this.x = x || Math.random() * ww;
this.y = y || Math.random() * wh;
this.size = Math.random() * 2 + 1;
this.shadowBlur = Math.random() * 10;
this.speedX = (Math.random() + 0.2 - 0.6) * 8;
this.speedY = (Math.random() + 0.2 - 0.6) * 8;
this.speedSize = Math.random() * 0.05 + 0.01;
this.opacity = 1;
this.vertices = [];
for (var i = 0; i < precision; i++) {
var step = (i / precision - 0.5) * (Math.PI * 2);
var vector = {
x: (15 * Math.pow(Math.sin(step), 3)),
y: -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
}
this.vertices.push(vector);
}
}
Heart.prototype.draw = function () {
this.size -= this.speedSize;
this.x += this.speedX;
this.y += this.speedY;
ctx.save();
ctx.translate(-1000, this.y);
ctx.scale(this.size, this.size);
ctx.beginPath();
for (var i = 0; i < precision; i++) {
var vector = this.vertices[i];
ctx.lineTo(vector.x, vector.y);
}
ctx.globalAlpha = this.size;
ctx.shadowBlur = Math.round((3 - this.size) * 10);
function col() {
var h = parseInt(Math.random() * 100 + 150);
var s = parseInt(Math.random() * 5 + 80);
var l = parseInt(Math.random() * 5 + 80);
var a = (Math.random() * 0.2 + 0.7).toFixed(2);
return `hsla(${h},${s}%,${l}%,${a})`;
};
var c = col();
ctx.shadowColor = `${c}`;
ctx.shadowOffsetX = this.x + 1000;
ctx.globalCompositeOperation = "screen";
ctx.closePath();
ctx.fill();
ctx.restore();
};
function render(a) {
requestAnimationFrame(render);
hearts.push(new Heart())
ctx.clearRect(0, 0, ww, wh);
for (var i = 0; i < hearts.length; i++) {
hearts[i].draw();
if (hearts[i].size <= 0) {
hearts.splice(i, 1);
i--;
}
}
}
onResize();
window.addEventListener("mousemove", onMove);
window.addEventListener("touchmove", onMove);
window.addEventListener("resize", onResize);
requestAnimationFrame(render);
window.onload = function timep() {
// 请在这里按照格式修改前两个内容
timeDifference(`2022/1/9 16:52:00`, `纪念日`, h1);
ptimer = setTimeout(timep, 1000); // 添加计时器
}
//@function 计算当前时间到目标时间所差天数,小时,分钟,秒数
//@param endT为目标时间,需按照字符串格式输入,endName为目标时间的名字;默认为`目标时间`
//@return 根据目标时间在当前时间的前后分别返回`距离XXX已过去XX天XX小时XX分XX秒`或`距离XXXX还有:XX天XX小时XX分XX秒`
function timeDifference(endT, endName = `目标时间`, obj) {
var startTime = new Date().getTime();//引入当前时间戳
var endTime = new Date(endT).getTime();//引入结束目标时间戳
var secondDif = parseInt((endTime - startTime) / 1000);//计算真实时间差,单位s/秒
if (secondDif < 0) {
var secondDifference = -secondDif;
} else {
var secondDifference = secondDif;
}//定义时间差为正
var day = parseInt(secondDifference / 24 / 60 / 60);//计算出天数取整
var hour = parseInt(secondDifference / 60 / 60) % 24;//计算出总小时数去掉达到一天24h的部分
var minute = parseInt(secondDifference / 60) % 60;//计算出总分钟数去掉达到一小时60分钟的部分
var second = secondDifference % 60;//总秒数去掉达到一分钟60秒的部分
if (secondDif < 0) {//根据真实时间差选择输出语句
obj.innerHTML = `距离${endName}已过去:<br>${day < 10 ? '0' + day : day} 天 ${hour < 10 ? '0' + hour : hour} 小时 ${minute < 10 ? '0' + minute : minute} 分钟 ${second < 10 ? '0' + second : second} 秒<br>
<span> 无论是过去,还是未来,我都将奉陪到底。<br>Whether it is the past or the future, <br>I will accompany you to the end.`
//此处修改过去时输出的内容
return false;
} else {
obj.innerHTML = `距离${endName}还有:<br>${day < 10 ? '0' + day : day} 天 ${hour < 10 ? '0' + hour : hour} 小时 ${minute < 10 ? '0' + minute : minute} 分钟 ${second < 10 ? '0' + second : second} 秒<br>
<span>你的过去我来不及参与，你的未来我奉陪到底。<br>I am too late to participate in your past,<br> and I will accompany you to the end of your future.`
//此处修改未来时输出的内容
return true;
}
}
</script>
<audio id="bgmusic" src="http://music.163.com/song/media/outer/url?id=1851244378.mp3" autoplay="autoplay"
loop="loop" style="display: block; width: 3%; height:3%;"></audio>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
var audio = document.getElementById('bgmusic');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
audioAutoPlay();
});
</script>
</body>
</html>
最终样式
这篇关于纪念日计时器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-01后台管理开发学习：新手入门指南
- 2024-11-01后台管理系统开发学习：新手入门教程
- 2024-11-01后台开发学习：从入门到实践的简单教程
- 2024-11-01后台综合解决方案学习：从入门到初级实战教程
- 2024-11-01接口模块封装学习入门教程
- 2024-11-01请求动作封装学习：新手入门教程
- 2024-11-01登录鉴权入门：新手必读指南
- 2024-11-01动态面包屑入门：轻松掌握导航设计技巧
- 2024-11-01动态权限入门：新手必读指南
- 2024-11-01动态主题处理入门：新手必读指南
