【JS】实现一个倒计时

方案一:

        function countDown(time) {var nowTime = +new Date();//返回的是当前时间的总毫秒数var inputTime = + new Date(time); //返回的是用户输入时间总的毫秒数var times = (inputTime - nowTime) / 1000;  //times是剩余时间的总数var d = parseInt(times / 60 / 60 / 24); //计算天数var h = parseInt(times / 60 / 60 % 24);//计算小时var m = parseInt(times / 60 % 60);//计算分数var s = parseInt(times % 60);//计算秒数return d + '天' + h + '时' + m + '分' + s + '秒';}document.write(countDown('3021-10-27 18:00:00'));var date = new Date();document.write('<br>' + date);

方案二:

   <div><span class="hour">0</span><span class="minute">0</span><span class="second">0</span></div>
  div{width:300px;height:100px;margin:100px auto;box-sizing: border-box;display: flex;flex-direction: ;}span{width: 80px;height:100px;line-height:100px;text-align: center;background-color: darkslategrey;color: #fff;font-size: 20px;box-sizing: border-box;}
 // 获取元素var hour = document.querySelector('.hour'); //小时的盒子var minute = document.querySelector('.minute'); //分钟var second = document.querySelector('.second'); //秒数var inputTime = + new Date('2021-10-28 18:00:00'); //返回的是用户输入时间总的毫秒数// 开启定时器countDown();setInterval(countDown,1000);function countDown(time) {var nowTime = +new Date();//返回的是当前时间的总毫秒数var times = (inputTime - nowTime) / 1000;  //times是剩余时间的总数// var d = parseInt(times / 60 / 60 / 24); //计算天数var h = parseInt(times / 60 / 60 % 24);//计算小时h = h < 10 ? '0' + h : h;hour.innerHTML = h; //把剩余时间给小时的盒子var m = parseInt(times / 60 % 60);//计算分数m = m < 10 ? '0' + m : m;minute.innerHTML = m; //把剩余时间给分钟的盒子var s = parseInt(times % 60);//计算秒数s = s < 10 ? '0' + s : s;second.innerHTML = s; //把剩余时间给秒数的盒子// return d + '天' + h + '时' + m + '分' + s + '秒';}// document.write(countDown('2021-10-27 18:00:00'));// var date = new Date();// document.write('<br>' + date);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/581417.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式高薪岗位解析——单机片开发

很多人都问&#xff0c;什么专业适合做单机片开发呢 那么以下是一些可能适合从事单片机开发岗位的专业&#xff1a; 电子信息工程专业物联网工程专业嵌入式技术与应用专业应用电子技术专业软件技术专业自动化控制专业信息工程专业电气自动化等相关专业 此外&#xff0c;从事…

Windows/Linux环境登入mysql、mysqldump命令等多方式解决方案之简易记录

Windows/Linux环境登入mysql、mysqldump命令等多方式解决方案之简易记录 之前发布过Window方式,这次结合以上主题,完善下Linux相关登入方式过程,纯属做个记录,有需要的朋友可以做个学习参考。 一、Windows环境提示“‘mysql’ 不是内部或外部命令,也不是可运行的程序或批…

赏金猎人必学站点(梯外)

What to learn? Technical- Computer Fundamentals https://www.comptia.org/training/by-certification/a https://www.youtube.com/watch?vtIfRDPekybU https://www.tutorialspoint.com/computer_fundamentals/index.htm https://onlinecourses.swayam2.ac.in/cec19_cs…

Spring Cloud Gateway 常见过滤器的基本使用

目录 1. 过滤器的作用 2. Spring Cloud Gateway 过滤器的类型 2.1 内置过滤器 2.1.1 AddResponseHeader 2.1.2 AddRequestHeader 2.1.3 PrefixPath 2.1.4 RequestRateLimiter 2.1.5 Retry 2.2 自定义过滤器 1. 过滤器的作用 过滤器通常用于拦截、处理或修改数据流和事…

Linux普通权限、特殊权限、扩展权限和Umask值介绍

目录 一.简单权限介绍 1.文件系统权限 2.三种基本权限 3.修改文件和目录的权限 4.修改文件或模流属主和属组 二.文件和目录的特殊权限 1.SUID 2.SGID 3.Sticky Bit 三.ACL扩展权限 1.设置和查看扩展权限 2.setfacl常用参数 3.删除指定扩展权限操作演示 四.umask权…

Oracle database 静默安装 oracle12c 一键安装 12.1.0.2

基于oracle安装包中应答文件实现一键安装 注意此安装脚本基于12.1.0.2 安装包 原始安装包结构为两个压缩包 此脚本使用安装包为原始压缩包解压后、 重新封装为一个.zip压缩包 建议在linux 环境下解压重新压缩后 使用该脚本 支持环境: Linux :centerOS 7 oracle :12.1.0.…

Docker 概念介绍

1、Docker 简介 Docker一个快速交付应用、运行应用的技术: 可以将程序及其依赖、运行环境一起打包为一个镜像&#xff0c;可以迁移到任意Linux操作系统运行时利用沙箱机制形成隔离容器&#xff0c;各个应用互不干扰启动、移除都可以通过一行命令完成&#xff0c;方便快捷 Doc…

three.js实现3D汽车展厅效果展示

项目搭建 本案例还是借助框架书写three项目&#xff0c;借用vite构建工具搭建vue项目&#xff0c;搭建完成之后&#xff0c;用编辑器打开该项目&#xff0c;在终端执行 npm i 安装一下依赖&#xff0c;安装完成之后终端在安装 npm i three 即可。 因为我搭建的是vue3项目&…

【Python学习笔记(十)】串口被占用导致无法访问的解决办法

串口被占用导致无法访问的解决办法 前言正文1、封装串口打开函数2、解决过程3、实现效果 前言 在项目开发中需要用到串口进行通讯&#xff0c;但当有其他串口调试工具、串口助手等打开占用了某一端口&#xff0c;打开串口时会导致程序卡死&#xff0c;针对这一问题的出现及解决…

CentOS 8 安装指定版本ansible

背景&#xff1a;想要练习ansible使用&#xff0c;用于面试&#xff0c;结果使用centos 8 的yum安装失败&#xff0c;提示版本不兼容&#xff08;指的是python版本&#xff09;&#xff0c;故而使用python来安装指定版本的ansible&#xff0c;特此记录 环境&#xff1a;win11虚…

苹果手机打开Microsoft Outlook日历ics文件方法

作为一名经常需要处理各种日程安排的苹果用户&#xff0c;我深知ics文件的重要性。ics文件通常来自于我们日常使用的日历应用&#xff0c;比如Microsoft Outlook&#xff0c;是日程信息的标准格式。但很多时候&#xff0c;当我们尝试打开这些ics文件时&#xff0c;却会遇到种种…

gulimall-002 分布式基础概念

1、微服务概念 微服务是一种非常流行的架构风格。 拒绝大型单体应用&#xff0c;基于业务边界进行服务微化拆分&#xff0c;各个服务独立部署运行。 每个服务运行在自己的单个进程使用轻量级机制通信可以使用不同的编程语言编写以及不同的数据存储技术 2、集群&分布式&…

【VUE】Flask+vue-element-admin前后端分离项目发布到linux服务器操作指南

目录 一、Flask后端发布环境搭建1.1 python环境第一步&#xff1a;安装python环境第二步&#xff1a;配置python虚拟环境 1.2 uwsgi环境1.3 nginx配置1.4 测试 二、VUE前端发布环境搭建2.1 配置修改2.2 打包上传服务器2.3 nginx配置2.3 测试 三、联合调试 一、Flask后端发布环境…

MyBatis 中 #{}和 ${}的区别是什么?

MyBatis 中 #{}和 ${}的区别是什么&#xff1f; 在 MyBatis 中&#xff0c;#{} 和 ${} 是用于在 SQL 语句中插入参数值的两种方式&#xff0c;它们之间有重要的区别&#xff1a; #{} 的使用&#xff1a; #{} 主要用于预编译的 SQL 语句中&#xff0c;它会将参数值以安全的方式…

python 框架 写一个demo

首先&#xff0c;确保您已经安装了Python和Django。您可以使用以下命令来安装Django&#xff1a; pip install django接下来&#xff0c;创建一个新的Django项目。在命令行中&#xff0c;使用以下命令&#xff1a; django-admin startproject myproject这将创建一个名为mypro…

pyCharm 打印控制台中文乱码解决办法

解决方法 在 "File" -> "Settings" 中的控制台设置&#xff1a; 在 "File" -> "Settings" 中&#xff0c;你可以找到 "Editor" -> "General" -> "Console"。在这里&#xff0c;你可能会找到…

docker学习(十八、network介绍)

[TOC]添加链接描述 首先&#xff0c;我们要知道什么是 Docker 网络。简单来说&#xff0c;它就是 Docker 中用于实现容器间通信的一个东西。 network相关内容&#xff1a; docker学习&#xff08;十八、network介绍&#xff09; docker学习&#xff08;十九、network使用示例br…

【快速全面掌握 WAMPServer】03.玩转安装和升级

网管小贾 / sysadm.cc 大多数情况我们在了解和学习任何一款软件之前都会先去尝试一下软件的安装&#xff0c;毕竟只有安装好了软件&#xff0c;再通过使用它来进一步学习和掌握。 那么同样的道理&#xff0c;我们要学习和掌握如何动手搭建 PHP 的调试环境&#xff0c;那么作为…

启明智显开源项目分享|基于Model 3c芯片的86中控面板ZX3D95CM20S-V11项目软硬件全开源

前言&#xff1a; 本文为4寸 480*480 RGB接口IPS全面触屏的86中控面板&#xff08;RT-ThreadLVGL&#xff09;软硬件开源干货内容&#xff0c;该项目是综合性非常强的RTOS系列项目&#xff01;项目主控芯片使用 Model 3c&#xff0c;整体实现了简化版本的86中控面板的功能需求…

“2023年的技术发展与个人成长:回顾与展望“

文章目录 每日一句正能量前言工作生活未来展望后记 每日一句正能量 凡事顺其自然&#xff0c;遇事处于泰然&#xff0c;得意之时淡然&#xff0c;失意之时坦然&#xff0c;艰辛曲折必然&#xff0c;历尽沧桑悟然。 前言 在这快速发展的信息时代&#xff0c;技术的进步和创新不…