【前端demo】倒计时器 可选择时间 原生实现

文章目录

    • 效果
    • 过程
      • 日历与获取时间
      • 居中
      • 背景与字
      • 计时器
      • 清空计时器
    • 代码
      • HTML
      • CSS
      • JS

其他demo

效果

在这里插入图片描述

效果预览:倒计时器 可选择时间 (codepen.io)

参考:

Simple Clock/Countdown timer (codepen.io)

前端页面实现倒计时效果的几种方法_前端倒计时__Boboy的博客-CSDN博客

过程

日历与获取时间

这个是<input type="date">

在这里插入图片描述

想要获取时间:这样就可以把点击的时间传入

<input class="date" id="date" type="date" value="" onchange="timeChange(this.value)">

居中

想让body的内容上下居中,设置了flexjustify-content: center;时没有效果。这是因为body没有高度,它的高度是由内容撑开的,无法上下居中。 想要解决这个问题,需要设置

height: 100vh;

使得body占满整个窗口,此时就有内容的上下居中效果了。
左右居中同理(width:100vw)。

背景与字

背景颜色:

background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);

背景是一种绿色,字体颜色color是白色(或偏白色的浅绿色),影子text-shadow的阴影颜色是深绿色。颜色很和谐。

在这里插入图片描述

计时器

我们获取选择的时间后,就可以计算选择的时间与当前时间的差值,然后需要写一个计时器setTimeOut每一秒调用一次自己 ,这样才会有秒数动态减少的效果。

timer = setTimeout(function () {timeChange(date)}, 1000);

我们令每次调用timeChange都输出当前时间:很显然,每次都要调用一次。

在这里插入图片描述

注意,这里不能写:

timer = setTimeout(timeChange(date), 1000);

这是复杂度为2n的递归调用,会调用很多次函数。第1秒的时候调用1次,第2秒时调用2次(原本的和新递归出来的),第3秒调用4次…会爆栈。

清空计时器

当选择新的时间时,要把之前的计时器清除,否则会出现两个计时器同时工作的情况:

在这里插入图片描述

if(timer!=='') clearTimeout(timer);

代码

HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倒计时器</title><link rel="stylesheet" href="style.css">
</head><body><div class="main"><div class="title"><div class="text">请输入未来的时间</div><input class="date" id="date" type="date" value="" onchange="timeChange(this.value)"></div><div class="container"><div class="item"><p class="time">D</p><p class="text">DAYS</p></div><div class="item"><p class="time">O</p><p class="text">HOURS</p></div><div class="item"><p class="time">N</p><p class="text">MINUTES</p></div><div class="item"><p class="time">E</p><p class="text">SECONDS</p></div></div></div></body></html><script src="index.js"></script>

CSS

body {background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}.main {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;width: 100vw;}.title {text-align: center;
}.title .text {font-size: 50px;color: #dbfff69c;text-shadow: 0 0 10px #009974;margin: 40px 0;
}.title .date {width: 100px;text-align: center;margin-bottom: 35px;background-color: #beffef;border-radius: 10px;border: 1px solid #beffef;padding: 5px;}.container {display: flex;margin-left: 90px;
}.container .item {margin-right: 70px;text-align: center;
}.container .item .time {font-size: 36px;font-weight: 300;
}.container .item .text {font-size: 14px;font-weight: 400;border-top: 1px solid #131313;padding-top: 10px;margin-top: -14px;
}

JS

let timer=''function timeChange(date) {console.log(date)// 每次选择了新时间要关闭之前的定时器if(timer!=='') clearTimeout(timer);let now = new Date().getTime();let future = new Date(date).getTime()let distance = future - nowconst time = document.getElementsByClassName('time')const len = time.length;if (distance <= 0) {let arr = 'DONE'for (let i = 0; i < len; i++) {time[i].innerHTML = arr[i];}timer=''return;}let days = Math.floor(distance / (1000 * 60 * 60 * 24));distance -= days * (1000 * 60 * 60 * 24);let hours = Math.floor(distance / (1000 * 60 * 60));distance -= hours * (1000 * 60 * 60);let minutes = Math.floor(distance / (1000 * 60));distance -= minutes * (1000 * 60);let seconds = Math.floor(distance / 1000);let arr = [days, hours, minutes, seconds];for (let i = 0; i < len; i++) {time[i].innerHTML = arr[i];}timer = setTimeout(function () {timeChange(date)}, 1000);
}

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

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

相关文章

Stable Diffuse 之 本地环境部署/安装包下载搭建过程简单记录

Stable Diffuse 之 本地环境部署/安装包下载搭建过程简单记录 目录 Stable Diffuse 之 本地环境部署/安装包下载搭建过程简单记录 一、简单介绍 二、注意事项 三、环境搭建 git 下载和安装 python 下载和安装 stable-diffusion-webui 下载和安装 测试 stable diffuse w…

智慧水产养殖方案,守护养殖水产品安全!

水产品在人们的饮食文化中占据着举足轻重的地位&#xff0c;更是人们摄入蛋白质的重要来源。因此&#xff0c;保障食品安全&#xff0c;提升养殖水产品的品质至关重要然。而传统的人工观察水产养殖方式较为单一&#xff0c;难以及时发现水质问题和投喂情况&#xff0c;容易导致…

Flink+Paimon多流拼接性能优化实战

目录 &#xff08;零&#xff09;本文简介 意外收获&#xff1a; &#xff08;一&#xff09;背景 &#xff08;二&#xff09;探索梳理过程 &#xff08;三&#xff09;源码改造 &#xff08;四&#xff09;修改效果 1、JOB状态 2、Level5的dataFile总大小 3、数据延…

STM32定时器定时及其应用

STM32定时器定时及其应用 定时器概述☆定时器相关配置CubeMX工程配置及程序实现固件库程序设计及实现 定时器概述 1. 工作原理 使用精准的时基&#xff0c;通过硬件的方式&#xff0c;实现定时功能。定时器核心就是计数器 2. 定时器分类   基本定时器&#xff08;TIM6~TIM7…

Redis 事务

1. 是什么 1. 官网 https://redis.io/dosc/manual/transactions/ 2. 可以一次执行多个命令&#xff0c;本质是一组命令的集合。一个事务中的所有命令都会序列化&#xff0c;按顺序地串行化执行而不会被其它命令插入&#xff0c;不许加塞 2. 能干啥 一个队列中&#xff0c;一次…

2022年03月 C/C++(七级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程(1~8级)全部真题・点这里 第1题:红与黑 有一间长方形的房子, 地上铺了红色、 黑色两种颜色的正方形瓷砖。你站在其中一块黑色的瓷砖上, 只能向相邻的黑色瓷砖移动。 请写一个程序, 计算你总共能够到达多少块黑色的瓷砖。 时间限制: 1000 内存限制: 65536 输入…

C语言----详解socket通信

一&#xff1a;什么是socket 刚接触socket的同学想必也知道socket的中文名&#xff0c;套接字&#xff0c;与其说是中文名倒不如说这是什么玩意&#xff0c;我们先不要管中文名的实际意义&#xff0c;我们先来了解一下什么是socket。 我们上网产生的数据都是经过协议栈一层一层…

Ubuntu18.04安装cuDNN

注册账号 https://developer.nvidia.com/rdp/cudnn-archive 该网站下载安装包需要先进行注册。登录成功后&#xff0c;找到与CUDA对应的版本。 选择Linux版本进行下载。 下载后的格式为.tar.xz 解压 tar xvJf cudnn-linux-x86_64-8.9.3.28_cuda12-archive.tar.xz配置环境 su…

【广州华锐互动】AR远程连接专家进行协同管理,解放双手让协同更便捷

AR远程协同系统是一种基于AR技术&#xff0c;实现远程设备维修和技术支持的系统。该系统通过将虚拟信息叠加在现实世界中&#xff0c;实现对设备的全方位监控和管理&#xff0c;并可以通过AR眼镜等终端设备&#xff0c;实时查看设备的各项数据和信息&#xff0c;为设备维修提供…

Python小知识 - 1. Python装饰器(decorator)

Python装饰器&#xff08;decorator&#xff09; Python装饰器是一个很有用的功能&#xff0c;它可以让我们在不修改原有代码的情况下&#xff0c;为已有的函数或类添加额外的功能。 常见的使用场景有&#xff1a; a. 函数缓存&#xff1a;对于一些计算量较大的函数&#xff0c…

2023.9.2 关于 JVM 垃圾回收机制(GC)

目录 为什么要有垃圾回收机制? STW&#xff08;Stop The World&#xff09;问题 垃圾回收机制主要回收哪个内存区域? 垃圾对象判断算法 引用计数算法 可达性分析算法 垃圾对象回收算法 标记清除算法 复制算法 标记整理算法 分代算法 为什么要有垃圾回收机制? 自动…

Navicat16连接Oracle报错:Oracle library is not loaded

1、有时候我们在用navicat的时候连接oracle的时候&#xff0c;它会提示我们Oracle library is not loaded&#xff0c;这时候我们要首先验证本机上是否已安装oracle的客户端&#xff0c;如果已安装客户段&#xff0c;navicat中的oci.dll选择我们安装的客户段的oci.dll文件 2、…

MATLAB中编译器中的变量联系到Simulink

MATLAB中编译器中的变量联系到Simulink 现在编译器中创建变量&#xff0c;进行编译&#xff0c;使其生成在工作区。 然后在Simulink中国使用变量即可。

opencv入门-Opencv原理以及Opencv-Python安装

图像的表示 1&#xff0c;位数 计算机采用0/1编码的系统&#xff0c;数字图像也是0/1来记录信息&#xff0c;图像都是8位数图像&#xff0c;包含0~255灰度&#xff0c; 其中0代表最黑&#xff0c;1代表最白 3&#xff0c; 4&#xff0c;OpenCV部署方法 安装OpenCV之前…

Hadoop 集群小文件归档 HAR、小文件优化 Uber 模式

文章目录 小文件归档 HAR小文件优化 Uber 模式 小文件归档 HAR 小文件归档是指将大量小文件合并成较大的文件&#xff0c;从而减少存储开销、元数据管理的开销以及处理时的任务调度开销。 这里我们通过 Hadoop Archive (HAR) 来进行实现&#xff0c;它是一种归档格式&#xf…

使用Docker配置深度学习的运行环境

文章目录 推荐实验环境前言docker安装docker操作docker配置常见方法&#xff08;安装包、联网、程序管理器&#xff09;安装驱动的前提要求传统方法安装驱动程序程序管理器安装联网安装deb包安装 安装完成后的设置非传统方法安装-通过容器安装驱动的前提要求安装NVIDIA-Contain…

Scala集合继承体系图

Scala集合简介 1&#xff09; Scala 的集合有三大类&#xff1a;序列 Seq、集Set、映射 Map&#xff0c;所有的集合都扩展自 Iterable特质。 2&#xff09; 对于几乎所有的集合类&#xff0c;Scala 都同时提供了可变和不可变的版本&#xff0c;分别位于以下两个包 不可变集合…

Orangepi安装外设库 wiringPi

注意&#xff1a;mobaXterm传送文件要在SSH登陆环境下才可以。 同时电脑和orangepi都在同一个wifi下。

unittest框架的使用

先简单介绍一下unittest的核心组成部分&#xff1a; 测试夹具&#xff1a;Test Fixture 一般用于执行测试用例的准备或者清理工作&#xff0c;比如测试开始前的数据准备或者测试结束的数据清理等。通过setUp()、tearDown()、setUpClass()、tearDownClass()这四个钩子函数实现了…