【免费】元旦倒计时代码带效果图资源-CSDN文库

共2个文件

png：1个

html：1个

需积分: 0 175 浏览量 2022-12-16 11:20:30 上传评论收藏 356KB ZIP 举报

【HTML元旦倒计时代码详解】在HTML中，创建一个倒计时功能通常涉及到JavaScript的使用，因为HTML本身不支持动态时间更新。这里我们将探讨如何使用HTML和JavaScript结合，为即将到来的元旦节创建一个倒计时特效。我们需要一个基本的HTML结构来展示倒计时。一个简单的HTML页面可能包含以下元素： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元旦倒计时</title> <style> /* 添加样式代码 */ </style> </head> <body> <div id="countdown">距离元旦还有:</div> <script src="倒计时.js"></script> </body> </html> ``` 在这个例子中，我们创建了一个`<div>`元素，用于显示倒计时信息，其ID为"countdown"。CSS样式可以自定义以适应不同的视觉效果。同时，我们在`<body>`标签底部引入了一个名为"倒计时.js"的外部JavaScript文件，其中包含了实现倒计时逻辑的代码。接下来，我们需要编写JavaScript代码。为了计算到元旦的倒计时，我们需要获取当前日期，并与元旦的日期进行比较。JavaScript中的`Date`对象可以帮助我们完成这个任务。假设我们用的是公历，元旦是每年的1月1日，我们可以这样写： ```javascript var targetDate = new Date('2023', '0', '1'); // 假设我们为2023年的元旦做倒计时 var countdownElement = document.getElementById('countdown'); function updateCountdown() { var now = new Date(); var timeLeft = (targetDate - now) / 1000; // 计算剩余秒数 var days = Math.floor(timeLeft / (60 * 60 * 24)); timeLeft %= (60 * 60 * 24); var hours = Math.floor(timeLeft / (60 * 60)); timeLeft %= (60 * 60); var minutes = Math.floor(timeLeft / 60); var seconds = timeLeft % 60; countdownElement.innerHTML = `距离元旦还有: ${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`; } setInterval(updateCountdown, 1000); // 每秒更新一次 ``` 这段代码首先定义了目标日期（即元旦），然后获取当前时间，并计算两者之间的差值，以秒为单位。接着，我们将这些时间单位转换成天、小时、分钟和秒，并更新HTML元素中的文本。我们使用`setInterval`函数每秒执行一次`updateCountdown`函数，以保持倒计时的实时性。为了增强用户体验，我们可以添加更多的功能，如动画效果、倒计时结束时的提醒等。例如，可以使用CSS的`transition`属性为倒计时数字添加平滑的过渡效果，或者在倒计时结束时弹出一个庆祝消息。创建一个HTML元旦倒计时涉及到HTML布局、JavaScript时间计算以及可能的CSS样式设计。这个过程可以帮助开发者更好地理解HTML、CSS和JavaScript三者之间的协作，同时也能提升网页交互性。通过实践这个项目，你可以深入学习时间处理、DOM操作以及事件循环等核心JavaScript概念。

资源推荐

资源详情

资源评论

收起资源包目录

元旦代码.zip （2个子文件）

元旦代码

效果图.png 360KB

yuandan.html 4KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>新年快乐</title> <style> body{ overflow: hidden; margin: 0; } 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: #c70012; padding: 0 20px; } h1 span{ position: fixed; left: 0; width: 100%; text-align: center; margin-top:30px; font-size:40px; } </style> </head> <body> <h1 id="h1"></h1> <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; } ctx.strokeStyle = "red"; ctx.shadowBlur = 25; ctx.shadowColor = "hsla(0, 100%, 60%,0.5)"; 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); ctx.shadowColor = "hsla(0, 100%, 60%,0.5)"; 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 starttime(){ time(h1,'2023/1/1'); // 2023年春节时间 ptimer = setTimeout(starttime,1000); // 添加计时器 } function time(obj,futimg){ var nowtime = new Date().getTime(); // 现在时间转换为时间戳 var futruetime = new Date(futimg).getTime(); // 未来时间转换为时间戳 var msec = futruetime-nowtime; // 毫秒未来时间-现在时间 var time = (msec/1000); // 毫秒/1000 var day = parseInt(time/86400); // 天 24*60*60*1000 var hour = parseInt(time/3600)-24*day; // 小时 60*60 总小时数-过去的小时数=现在的小时数 var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份取余剩下秒数秒数/60 就是分钟数 var second = parseInt(time%60); // 以60秒为一整份取余剩下秒数 obj.innerHTML="<br>距离2023年还有：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"<br><span>愿我所念的人平安喜乐，<br>愿我所想的事顺心如意。<br>May the people I think of be safe and happy, <br>and may the things I think of be all right.</span>" return true; } </script> <audio autoplay="autoplay" loop="loop" preload="auto" src="http://music.163.com/song/media/outer/url?id=1811921555.mp3"> </audio> </body> </html>

评论收藏

内容反馈