用html+css+j写一个简洁的考研倒计时的页面

1、直接上源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>考研倒计时</title><style>body {background-color: #f8f8f8;font-family: Arial, sans-serif;font-size: 16px;color: #333;margin: 0;padding: 0;}h1 {text-align: center;font-size: 32px;margin-top: 50px;}#countdown {text-align: center;font-size: 48px;margin-top: 30px;}#countdown span {display: inline-block;width: 80px;height: 80px;background-color: #ddd;border-radius: 50%;margin: 0 10px;line-height: 80px;text-align: center;font-size: 48px;}#countdown span:last-child {margin-right: 0;}</style>
</head>
<body><h1>考研倒计时</h1><div id="countdown"><span id="day"></span><span id="hour"></span><span id="minute"></span><span id="second"></span></div><script>var countDownDate = new Date("2023-12-23T00:00:00").getTime();var x = setInterval(function() {var now = new Date().getTime();var distance = countDownDate - now;var days = Math.floor(distance / (1000 * 60 * 60 * 24));var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));var seconds = Math.floor((distance % (1000 * 60)) / 1000);document.getElementById("day").innerHTML = days + "<br>天";document.getElementById("hour").innerHTML = hours + "<br>时";document.getElementById("minute").innerHTML = minutes + "<br>分";document.getElementById("second").innerHTML = seconds + "<br>秒";if (distance < 0) {clearInterval(x);document.getElementById("countdown").innerHTML = "已结束";}}, 1000);</script>
</body>
</html>

是有点简洁了哈哈

用html+css+j写一个简洁的考研倒计时的页面相关推荐

如何用最简洁的css代码写一个导航栏
如何用最简洁的css代码写一个导航栏首先我们在里面通过标签添加一个logo,然后通过标签简单的设置几个导航栏中的内容. 注:标签主要是用于设置超链接. <div><img src= ...
[css] 手写一个满屏品字布局的方案
[css] 手写一个满屏品字布局的方案 <!DOCTYPE html> <html><head><meta name="viewport" ...
用HTML，css,boostrap写一个综合大型购物网站
用HTML,css,boostrap写一个综合大型购物网站首先来看看页面的效果: 有需要的可以参考首先是首页index: <!DOCTYPE html> <html>< ...
手把手写一个慕课网的h5布局页面
简单写一个慕课网的h5布局页面以下部分为HTML结构代码: <!DOCTYPE html> <html><head><meta charset=" ...
用bootstrap写一个简洁的网页
在最近两周,我学习了bootstrap前端开发框架来快速制作一个网页,以往自己用html,css等学习的网页知识来写一个网页,往往需要挺长的时间.这次用bootstrap写的这个demo前后大概用了2 ...
Python写一个简洁拼写检查器
网上看到的一篇神文,利用的是朴素贝叶斯模型实现了一个简单的拼写检查器. 英文原文链接见这里,中文翻译如下 =============================================== ...
用HTML+CSS代码写一个3D旋转相册
看到有些人好奇用css怎么写出3D旋转相册的效果. 这里说说一种方法. 首先看一下效果写出这样的效果可以使用css的transform3D的变换效果: 第一步写出主体注意:因为演示都是使用同一张背 ...
html+css+js写一个王者荣耀积分夺宝
在游戏里面,积分夺宝是很抽中好东西的,于是想自己写一个页面,实现无限抽奖,而且必中荣耀水晶. 在线演示地址先看效果(完整代码在后面): 开始要选择大区: 抽一次: 抽十次(一下中四个荣耀水晶,太爽了 ...
弄一个html的登录页面,使用HTML写一个简单的跳转登录页面
最近在学习前端的知识,于是就想写一个简单的页面跳转,必须是勾选了"我同意"这个选项以后才能跳转,否则不能,不废话,直接上代码. 首先是第一个页面:testlogin1.html h ...

用html+css+j写一个简洁的考研倒计时的页面

用html+css+j写一个简洁的考研倒计时的页面相关推荐

最新文章

热门文章