JS新年倒计时

news/2024/11/28 7:46:12/

在这里插入图片描述

✅作者简介:热爱国学的Java后端开发者,修心和技术同步精进。
🍎个人主页:Java Fans的博客
🍊个人信条:不迁怒,不贰过。小知识,大智慧。
💞当前专栏:前端案例分享专栏
✨特色专栏:国学周更-心性养成之路
🥭本文内容:JS新年倒计时
更多内容点击👇
       JavaScript—实现手风琴画册

在这里插入图片描述

  不知不觉,2022年就进入了倒计时!十二月有太多的盼头了,平安夜,圣诞节,第一场雪,跨年倒计时,春节,当然,还有你们!那么我们离每一个日子都有多少天呢?下面我将分享一个我们中国人的传统节日——春节的倒计时吧。其他的时间,可以根据这个方法进行修改计算。

运行效果:
在这里插入图片描述

源码分享:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width: 300px;height: 100px;background-color: aquamarine;margin: 50px auto;text-align: center;line-height: 100px;border:1px solid black;border-radius: 100px;}button{width: 100px;height: 30px;margin: 0 auto;margin-left: 50%;}</style></head><body><div></div><script>var divEle=document.querySelector('div');dateTimes();//封装时间的函数function dateTimes(){// 获取2023年春节到1970年的毫秒数var date2023=new Date(2023,0,22,0,0,0);var ms2023=date2023.getTime();var myVar=setInterval(dateTimes,1000);var date=new Date();//获取当前时间到1970年的毫秒数var msCurrent=date.getTime();//时间差:总毫秒数var timeSc=ms2023-msCurrent;//倒计时:天,时,分,秒//获取 天var dateDays=Math.floor(timeSc/(1000*60*60*24));//去掉天数剩余的毫秒数timeSc=timeSc%(1000*60*60*24);console.log(timeSc);//获取 时var dateHours=Math.floor(timeSc/(1000*60*60));//去掉时剩余的毫秒数timeSc=timeSc%(1000*60*60);console.log(timeSc);//获取 分var dateMinutes=Math.floor(timeSc/(1000*60));//去掉分剩余的毫秒数timeSc=timeSc%(1000*60);console.log(timeSc);//获取 秒var dateSeconds=Math.floor(timeSc/1000);if(parseInt(dateHours)<10){dateHours='0'+dateHours;}if(parseInt(dateMinutes)<10){dateMinutes='0'+dateMinutes;}if(parseInt(dateSeconds)<10){dateSeconds='0'+dateSeconds;}var dateStr="新年倒计时:"+dateDays+'天'+dateHours+"时"+dateMinutes+"分"+dateSeconds+"秒";divEle.innerText=dateStr;}</script></body>
</html>

其他倒计时:修改 var date2023=new Date(2023,0,22,0,0,0); 即可,值得注意的是,1月用数字0表示

  • 平安夜倒计时:var date2023=new Date(2022,11,24,0,0,0);
  • 圣诞节倒计时:var date2023=new Date(2022,11,25,0,0,0);
  • 元旦倒计时:var date2023=new Date(2023,0,1,0,0,0);

其他知识快捷链接:时间日期:Date对象


  码文不易,本篇文章就介绍到这里,如果想要学习更多Java系列知识点击关注博主,博主带你零基础学习Java知识。与此同时,对于日常生活有困扰的朋友,欢迎阅读我的第四栏目:《国学周更—心性养成之路》,学习技术的同时,我们也注重了心性的养成。

在这里插入图片描述


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

相关文章

RocketMQ的TAG过滤和SQL过滤机制

写作目的 项目中各个中台都使用同一个DB。而DB下会使用中间件监听binlog转换成MQ消息&#xff0c;而下游的各个中台去MQ去拿自己感兴趣的消息。 TAG 如果使用TAG去获取自己感兴趣的消息&#xff0c;那么对于一条学生表变更binlog&#xff0c;最少要插入三条消息&#xff0c;比…

两位前阿里 P10 的成长经历的启发

目录 汤峥嵘的成长经历 关键节点一&#xff1a;到美国留学 关键节点二&#xff1a;美国工作十年 关键节点三&#xff1a;八年阿里时光 关键节点四&#xff1a;加入途牛和 VIPABC 毕玄的成长经历 关键节点一&#xff1a;小公司里脱颖而出 关键节点二&#xff1a;加入淘宝…

前端基础(十二)_overflow属性、clear属性、vertical-align属性

overflow属性 overflow的第一个属性值是x轴方向的属性&#xff0c;第二个值是y周方向的属性 <style>.box1 {width: 150px;height: 50px;等价于下面两个属性/* overflow: hidden auto; */overflow-x: hidden;overflow-y: auto;}</style>1、overflow-x 只包含水平方…

0126 搜索与回溯算法 Day15

剑指 Offer 34. 二叉树中和为某一值的路径 给你二叉树的根节点 root 和一个整数目标和 targetSum &#xff0c;找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [5,4,8,11,null,13,…

百度apollo源码学习(一) DEFINE_TYPE_TRAIT的理解

文章目录前言源码解读SFINAE机制举例参考前言 最近学习百度apollo源码&#xff0c;发现很多看不懂的代码&#xff0c;因才疏学浅&#xff0c;只能通过上网搜索&#xff0c;逐步理解&#xff0c;然后将理解完成的内容再次进行记录&#xff0c;其中参考了很多其他博主的博客。 我…

强调句句型

一、强调句句型&#xff1a; 1、用It is&#xff0f;was...that&#xff0f;who...句型表示强调。 &#xff08;1&#xff09;陈述句的强调句型&#xff1a;It is/was被强调部分&#xff08;通常是主语、宾语或状语&#xff09;that/who&#xff08;当强调主语且主语指人&#…

Pycharm SQL 警告:SQL dialect is not configured.

Pycharm SQL 警告&#xff1a;SQL dialect is not configured. 文章目录Pycharm SQL 警告&#xff1a;SQL dialect is not configured.Unable to resolve symbol XXX在我们编写python代码的时候&#xff0c;不免会在代码里面写入自己写的sql语句&#xff0c;因为很少有orm框架能…

大数据毕业设计人体跌倒检测系统

文章目录前言1 实现方法传统机器视觉算法基于机器学习的跌倒检测SVM简介SVM跌倒检测原理算法流程算法效果实现代码深度学习跌倒检测最终效果网络原理最后前言 背景和意义 在美国&#xff0c;每年在65岁以上老人中&#xff0c;平均每3人中就有1人发生意外跌倒&#xff0c;每年…