草庐IT

JS新年倒计时

Java Fans 2023-04-09 原文

✅作者简介:热爱国学的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知识。与此同时,对于日常生活有困扰的朋友,欢迎阅读我的第四栏目《国学周更—心性养成之路》,学习技术的同时,我们也注重了心性的养成。

有关JS新年倒计时的更多相关文章

  1. ruby - Ruby 性能中的计时器 - 2

    我正在寻找一个用ruby​​演示计时器的在线示例,并发现了下面的代码。它按预期工作,但这个简单的程序使用30Mo内存(如Windows任务管理器中所示)和太多CPU有意义吗?非常感谢deftime_blockstart_time=Time.nowThread.new{yield}Time.now-start_timeenddefrepeat_every(seconds)whiletruedotime_spent=time_block{yield}#Tohandle-vesleepinteravalsleep(seconds-time_spent)iftime_spent

  2. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目,Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  3. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如,application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文,我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢?我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件?同样,我正在按照一些说明安装TwitterBootstrap(http:

  4. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库,其中大部分是用JavaScript(Node.js)编写的,一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread,目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标,所以maketest在每

  5. node.js - 从未编写过任何自动化测试,我应该如何开始行为驱动开发? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭9年前。多年来,我一直在使用多种语言进行编程,并且认为自己总体上相当擅长。但是,我从未编写过任何自动化测试:没有单元测试,没有TDD,没有BDD,什么都没有。我已经尝试开始为我的项目编写适当的测试套件。我可以看到在进行任何更改后能够自动测试项目中所有代码的理论值(value)。我可以看到像RSpec和Mocha这样的测试框架应该如何使设置和运行所述测试变得相当容易

  6. ruby-on-rails - 将 Angular JS 与 Rails 集成 - 2

    我需要一些指导来了解如何将Angular整合到rails中。选择Rails的原因:我喜欢他们偏执的做事方式。还有迁移,gem真的很酷。使用angular的原因:我正在研究和寻找最适合SPA的框架。Backbone似乎太抽象了。我不得不在Angular和Ember之间做出选择。我首先开始阅读Angular,它对我来说很有意义。所以我从来没有去读过关于ember的文章。使用Angular和Rails的原因:我研究并尝试使用小型框架,例如grape、slim(是的,我也使用php)。但我觉得需要坚持项目的长期范围。我个人喜欢用Rails的方式做事。这就是我需要帮助的地方,我在Rails4中有

  7. node.js - 如何比较图像并确定哪个内容更多? - 2

    目标:我想从动画GIF中抓取最佳帧并将其用作静态预览图像。我相信最好的帧是显示最多内容的帧-不一定是第一帧或最后一帧。以这张动图为例:--这是第一帧:--这是第28帧:很明显,第28帧很好地代表了整个GIF。我如何以编程方式确定一帧是否比另一帧具有更多像素/内容?如果您能向我指出任何想法、想法、包/模块或文章,我们将不胜感激。 最佳答案 实现此目的的一种直接方法是估计entropy每个图像的帧,并选择具有最大熵的帧。在信息论中,熵可以被认为是图像的“随机性”。单一颜色的图像是非常可预测的,分布越平坦,越随机。这与Arthur-R描述

  8. css - Less.js LoadError - 没有这样的文件要加载 - less 在 main .less 文件上 - 2

    我正在尝试在一个新元素中测试less.js。我100%确定javascript文件加载正常,但我的css文件夹中的less文件一直出现此错误。我打算在启动之前使用less.app编译它,但我宁愿让less.js在开发期间进行编译。由于它是.less或其他文件而不允许浏览器访问该文件是否存在问题?谢谢(运行ubuntu11.04和ruby​​v1.9.2,在firefox和chrome中同样的错误)这是我的head.haml文件,我在其中链接到less.js和app.less(它们都在正确的文件夹中)%link{:rel=>"stylesheet/less",:type=>"text/c

  9. ruby-on-rails - 遵循 DCI 设计时在哪里进行验证? - 2

    我正在按照DCI构建新Rails应用程序的行为,但我对将验证放在哪里有一些疑问。传统上,如果您要使用ActiveRecord模型管理您的数据,验证是在继承自AR的特定类中定义的,并且它们似乎适合作为数据层的一部分。然而,在我看来,只在特定角色下进行某些验证是有意义的,并且只有当对象在该上下文中时才应检查它们,在所有其他情况下都将被忽略。这基本上意味着这些验证应该在特定角色上定义,并且当对象在有意义的上下文中使用时,应该使用这些角色模块扩展对象。您认为将这些验证保留在角色上是个好主意吗?如果是这样,您如何声明它们而不污染与对象相同的类的其他实例?如果我想使用ActiveRecord验证,

  10. ruby - I18n::InvalidLocaleData:I18n gem 在 js 导出中有问题 - 2

    我正在OSX10.13.4上使用Rails3.2.22.4、Ruby2.2.7开发一个应用程序。有多个翻译文件,例如。en.yml,sq.yml基于国家。从下面的ruby​​mine执行命令时,加载网页时出现错误。rake--tracei18n:js:export来自en.yml的yaml内容已经过验证并且是正确的。从文件中删除后引发错误的特定行将在其他一些.yml文件中给出错误。正在使用当前版本的gemi18n(0.9.5)。Rails服务器启动但加载Web应用程序第一页时因同样的错误而中断。代码遇到i18n翻译代码时抛出错误,当错误从一个文件转移到另一个文件时,yml格式不是问题。

随机推荐