2023年元旦倒计时案例

news/2024/10/31 2:22:31/

文章目录

  • 基于HTML实现2023年倒计时
    • 代码实现

基于HTML实现2023年倒计时

代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2023倒计时</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>/* 公共基础样式 */#clockdiv{width: 300px;height: 300px;background-color: #14274F;color: #fff;display: flex;justify-content: center;align-items: center;margin: 50px;}/* 凸起效果样式 */#demo1 {border-left: 1px solid #33B8EC;border-top: 1px solid #33B8EC;border-right: 3px solid #000;border-bottom: 3px solid #000;color: #ffffff;}</style>
</head>
<body><div id="clockdiv"><div id="demo1"><div><div >距离2023年元旦还有</div></div><div><span class="days">0</span><div class="smalltext"></div></div><div><span class="hours">0</span><div class="smalltext">小时</div></div><div><span class="minutes">0</span><div class="smalltext"></div></div><div><span class="seconds">0</span><div class="smalltext"></div></div></div></div><script>
// 设定结束时间
var deadline = new Date("2023-01-01 00:00:00").getTime();// 每秒更新倒计时
var x = setInterval(function() {// 获取当前时间var now = new Date().getTime();// 计算时间差var t = deadline - now;// 计算天、小时、分钟、秒var days = Math.floor(t / (1000 * 60 * 60 * 24));var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));var seconds = Math.floor((t % (1000 * 60)) / 1000);// 显示倒计时document.getElementsByClassName("days")[0].innerHTML = days;document.getElementsByClassName("hours")[0].innerHTML = hours;document.getElementsByClassName("minutes")[0].innerHTML = minutes;document.getElementsByClassName("seconds")[0].innerHTML = seconds;// 如果结束时间到了,停止倒计时if (t < 0) {clearInterval(x);document.getElementById("clockdiv").innerHTML = "倒计时结束";}
}, 1000);
</script></body>
</html>

输出为:
在这里插入图片描述


http://www.ppmy.cn/news/5659.html

相关文章

Linux进程概念

进程的概念 进程&#xff08;Process&#xff09;是计算机中的一个具有独立功能的程序关于某个数据集合的一次运行活动&#xff0c;是系统进行资源分配和调度的基本单位&#xff0c;是操作系统结构的基础。在早期面向进程设计的计算机结构中&#xff0c;进程是程序的基本执行实…

基于Canal+kafka监听数据库变化的最佳实践

1、前言 工作中&#xff0c;我们很多时候需要根据某些状态的变化更新另一个业务的逻辑&#xff0c;比如订单的生成&#xff0c;成交等&#xff0c;需要更新或者通知其他的业务。我们通常的操作通过业务埋点、接口的调用或者中间件完成。 但是状态变化的入口比较多的时候&#x…

FT2232作为JTAG烧录器的使用步骤详解

FT2232作为JTAG烧录器的使用步骤详解FT2232作为JTAG烧录器的使用步骤详解配置OpenOCD环境(已经配置好的可以跳过)【步骤 1】安装 FT2232HL 芯片的驱动&#xff0c;安装文件为 CDM21228_Setup.exe。【步骤 2】 安装 FT_Prog_v3.6.88.402 Installer.exe【步骤 3】 使用 FT Prog 软…

你易忽略的三极管电路问题1:下拉电阻

如下这个三极管共射极驱动电路中&#xff0c;B、E极之间的下拉电阻的作用&#xff1f;是否可以将其去除&#xff1f;该电阻有两个重要的作用&#xff1a;在驱动信号关闭时给三极管基极一个固定的电平。当驱动信号&#xff08;SIGNAL&#xff09;关闭时&#xff0c;若没有下拉电…

【Java基础知识复盘】String、StringBuffer、StringBuilder篇——持续更新中

本人知识复盘系列的博客并非全部原创&#xff0c;大部分摘自网络&#xff0c;只是为了记录在自己的博客方便查阅&#xff0c;往后也会陆续在本篇博客更新本人查阅到的新的知识点&#xff0c;望悉知&#xff01; String类 在 Java 中字符串属于对象&#xff0c;Java 提供了 Str…

矢量网络分析仪如何测量史密斯图及滤波器的带宽?

矢量网络分析仪是一种很神奇的测量仪器&#xff0c;它的功能很强大也值得人们去探索。今天&#xff0c;安泰测试工程师就针对矢量网络分析仪中的史密斯图及滤波器的带宽测量进行简单的介绍&#xff0c;希望能够让更多的人对此有所了解&#xff0c;并产生兴趣。 首先仪器了解一下…

试卷安全分发系统

摘要 高校教务管理过程中&#xff0c;试卷以明文形式传输和集中存储&#xff0c;存在数据泄漏安全隐患。现提出了一个基于数字证书的试卷防泄漏方案&#xff0c;采用算法加密试卷&#xff0c;试卷在传输过程中中以密文的形式传输&#xff0c;每次传输的时候都会对试卷进行签名…

Mac怎么清理缓存?这两种方法都非常好用哦

与电脑系统或应用程序非常相似&#xff0c;您的Mac也有自己的系统缓存&#xff0c;它可以在后台临时存储数据&#xff0c;以加快软件安装速度并减少互联网数据使用量&#xff08;通过Apple&#xff09;。与电脑系统或应用程序类似&#xff0c;缓存数据可能会开始堆积——占用存…