利用JavaScript实现春节倒计时效果(移动端和PC端)
目录
- 效果预览
- html部分
- 移动端样式（mobile.css）
- pc端样式（style.css）
- js部分
- 效果演示
- 移动端
- pc端
效果预览
html部分
<!DOCTYPE html>
<!--geyao-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css" rel="external nofollow" >
<link rel="stylesheet" href="css/mobile.css" rel="external nofollow" >
<title>春节倒计时</title>
</head>
<body>
<div class="container">
<h2><span id="title">春节倒计时</span>2022</h2>
<div class="countdown">
<div id="day">--</div>
<div id="hour">--</div>
<div id="minute">--</div>
<div id="second">--</div>
</div>
<!-- 手动切换不好看 直接加定时器切换 微信公众号关注前端小歌谣
-->
<!-- <div id="btn">切换背景</div> -->
</div>
<script src="js/script.js"></script>
</body>
</html>
移动端样式（mobile.css）
@media screen and (max-width: 1025px) {
* {
margin: 0;
padding: 0;
}
body {
background: rgb(129, 155, 190) url(../image/geyao1.jpg);
background-size: cover;
background-position: center center;
height: 100%;
}
.container {
margin: 0;
color: #fff;
line-height: normal;
position: absolute;
align-items: center;
left: 5%;
right: 5%;
}
.container h2 {
font-size: 6em;
text-align: center;
margin: 10% 0;
color: #fff;
}
.container h2 span {
color: #fff;
display: block;
text-align: center;
font-size: 0.3em;
font-weight: 300;
letter-spacing: 2px;
}
.countdown {
display: flex;
justify-content: space-around;
margin: 0;
}
.countdown div {
width: 20%;
height: 13vw;
margin: 0 10px;
line-height: 13vw;
font-size: 2em;
position: relative;
text-align: center;
background: #333333;
color: #ffffff;
font-weight: 500;
border-radius: 10px 10px 0 0;
}
.countdown div:before {
content: '';
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: 30px;
background: #b00000;
color: #ffffff;
font-size: 0.4em;
line-height: 35px;
font-weight: 300;
border-radius: 0 0 10px 10px;
}
.countdown #day:before {
content: '天';
}
.countdown #hour:before {
content: '时';
}
.countdown #minute:before {
content: '分';
}
.countdown #second:before {
content: '秒';
}
}
pc端样式（style.css）
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
@media screen and (min-width: 1025px) {
body {
background: rgb(129, 155, 190) url(../image/geyao1.jpg);
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
.container {
position: absolute;
top: 80px;
left: 100px;
right: 100px;
bottom: 80px;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 50px 50px rgba(0, 0, 0, 0.8),
0 0 0 100px rgba(0, 0, 0, 0.3);
}
.container h2 {
text-align: center;
font-size: 10em;
line-height: 0.7em;
color: #ffffff;
margin-top: -80px;
}
.container h2 span {
display: block;
font-weight: 300;
letter-spacing: 6px;
font-size: 0.2em;
}
.countdown {
display: flex;
margin-top: 50px;
}
.countdown div {
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: #333;
color: #fff;
margin: 0 15px;
font-size: 3em;
font-weight: 500;
border-radius: 10px 10px 0 0;
}
.countdown div:before {
content: '';
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: 35px;
background: #b00000;
color: #ffffff;
font-size: 0.35em;
line-height: 35px;
font-weight: 300;
border-radius: 0 0 10px 10px;
}
.countdown #day:before {
content: '天';
}
.countdown #hour:before {
content: '时';
}
.countdown #minute:before {
content: '分';
}
.countdown #second:before {
content: '秒';
}
}
canvas {
width: 100%;
height: 100%;
}
::-webkit-scrollbar {
display: none;
}
#btn{
margin: 40px;
width: 100px;
height: 30px;
background: pink;
text-align: center;
color: darkred;
line-height: 30px;
}
js部分
class Snowflake {
constructor() {
this.x = 0;
this.y = 0;
this.vx = 0;
this.vy = 0;
this.radius = 0;
this.alpha = 0;
this.reset();
}
reset() {
this.x = this.randBetween(0, window.innerWidth);
this.y = this.randBetween(0, -window.innerHeight);
this.vx = this.randBetween(-3, 3);
this.vy = this.randBetween(2, 5);
this.radius = this.randBetween(1, 4);
this.alpha = this.randBetween(0.1, 0.9);
}
randBetween(min, max) {
return min + Math.random() * (max - min);
}
update() {
this.x += this.vx;
this.y += this.vy;
if (this.y + this.radius > window.innerHeight) {
this.reset();
}
}
}
class Snow {
constructor() {
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
document.body.appendChild(this.canvas);
window.addEventListener('resize', () => this.onResize());
this.onResize();
this.updateBound = this.update.bind(this);
requestAnimationFrame(this.updateBound);
this.createSnowflakes();
}
onResize() {
this.width = window.innerWidth;
this.height = window.innerHeight;
this.canvas.width = this.width;
this.canvas.height = this.height;
}
createSnowflakes() {
const flakes = window.innerWidth / 4;
this.snowflakes = [];
for (let s = 0; s < flakes; s++) {
this.snowflakes.push(new Snowflake());
}
}
update() {
this.ctx.clearRect(0, 0, this.width, this.height);
for (let flake of this.snowflakes) {
flake.update();
this.ctx.save();
this.ctx.fillStyle = '#FFF';
this.ctx.beginPath();
this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
this.ctx.closePath();
this.ctx.globalAlpha = flake.alpha;
this.ctx.fill();
this.ctx.restore();
}
requestAnimationFrame(this.updateBound);
}
}
new Snow();
var stop = false;
function show_runtime() {
var newDay = '2022/2/1 00:00:00';
var countDate = new Date(newDay);
var now = new Date().getTime();
gap = countDate - now;
var second = 1000;
var minute = second * 60;
var hour = minute * 60;
var day = hour * 24;
var d = Math.floor(gap / day);
var h = Math.floor((gap % day) / hour);
var m = Math.floor((gap % hour) / minute);
var s = Math.floor((gap % minute) / second);
if ((d, h, m, s < 0)) {
stop = true;
} else {
document.getElementById('day').innerText = d;
document.getElementById('hour').innerText = h;
document.getElementById('minute').innerText = m;
document.getElementById('second').innerText = s;
}
}
function newyear() {
document.getElementById('title').innerText = 'Happy Spring Festival';
document.getElementById('day').innerText = '春';
document.getElementById('hour').innerText = '节';
document.getElementById('minute').innerText = '快';
document.getElementById('second').innerText = '乐';
}
var time = setInterval(() => {
show_runtime();
if (stop === true) {
newyear();
clearInterval(time);
}
}, 1000);
// 定时器 控制图片自动切换
function downTime() {
let item = 1;
setInterval(() => {
item++;
if (item === 4) {
item = 1;
}
console.log(item, 'item');
document.body.style.backgroundImage = `url(./image/geyao${item}.jpg)`;
return item;
e.stopPropagation(); //取消事件冒泡
}, 2000);
}
window.onload = downTime;
效果演示
移动端
pc端
以上就是利用JavaScript实现春节倒计时效果(移动端和PC端)的详细内容，更多关于JavaScript倒计时效果的资料请关注我们其它相关文章！
相关推荐
-
用javascript实现倒计时效果
用Javascript实现倒计时效果,供大家参考,具体内容如下 正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教 在某些商城网站中,我们常常可以看见其网站或者app上有一个区域放的是倒计时,来用来提醒用户还有多少时间将会发生什么事情,下面我们用代码来对其进行实现 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
-
javaScript实现支付10秒倒计时
本文实例为大家分享了javaScript实现支付10秒倒计时的具体代码,供大家参考,具体内容如下 效果图如下: 这个案例其实很简单,只要掌握了js基础中的onclick函数以及定时器的使用,就能快速的做出这样的效果,让我们一起来看看怎么做吧~ 首先需要两个html文件,在两个文件中利用html和css分别写好初始页面效果,在这里就不多说啦,具体可以看下面的代码 让我们来谈谈js需要做出的效果: 1.在页面1中点击支付要跳转到另一个文件中 2.刚进入页面2时要开始计时10秒,计时结束后返回页面1
-
javascript实现倒计时提示框
本文实例为大家分享了javascript实现倒计时提示框的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
javascript实现发送短信倒计时
本文实例为大家分享了javascript实现发送短信倒计时的具体代码,供大家参考,具体内容如下 实现思路: 1.js获取发送按钮元素对象 2.设置一个发送间隔时间(全局变量) 3.给发送按钮元素对象绑定点击事件- - -onclick, 点击事件处理程序: ① 点击后俺按钮设置成禁用-disabled:true; ② 使用定时函数,时间间隔为1秒, 定时函数调用的函数处理程序: 判断时间是否为0 不为0- - -按钮里的描述内容变为:剩余多少秒,且时间减1 为0- - -则恢复按钮可以点击状态,
-
javascript实现简单页面倒计时
本文实例为大家分享了javascript实现简单页面倒计时的具体代码,供大家参考,具体内容如下 话不多说,直接贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body { color:red; text-align: center; } .one{ color:black; text-align
-
JavaScript实现前端网页版倒计时
使用原生JavaScript简单实现倒计时,供大家参考,具体内容如下 效果 代码 // An highlighted block <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- css样式 --> <style type="text/css"> * { margin: 0;
-
javascript实现简单倒计时效果
本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下 实现思路: 1.页面创建好天.小时.分.秒的标签元素,定义好样式 2.js获取天.小时.分.秒的元素对象,方便后面给它们赋值- - -剩余时间 3.定义一个计算当前时间和设定时间- - -时间差的函数,将剩余天数.小时.分.秒分别计算计算出来,并赋值给相应的与元素内容 4.使用setInterval()函数,设置每隔1秒执行一次时间差函数, 5.注意setInterval()函数之前,先调用一次时间差函数
-
JavaScript实现网页跨年倒计时
JavaScript网页–跨年倒计时,供大家参考,具体内容如下 最近学弟在追一个学妹,我在帮学弟出谋划策. 学妹告诉学弟,我怕我们之间是因为这段时间接触多了你才喜欢我的.等跨年的时候,如果你还喜欢我,那个时候我再给你答案. 于是今天我帮学弟做了一个跨年倒计时的网页,希望他能够坚持下去. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> &
-
利用JavaScript实现春节倒计时效果(移动端和PC端)
目录 效果预览 html部分 移动端样式(mobile.css) pc端样式(style.css) js部分 效果演示 移动端 pc端 效果预览 html部分 <!DOCTYPE html> <!--geyao--> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
-
javascript实现下班倒计时效果的方法(可桌面通知)
本文实例讲述了javascript实现下班倒计时效果的方法.分享给大家供大家参考.具体如下: 周末了,搞个下班倒计时,娱乐下. 确保下面三点: 1.非IE浏览器,较高Chrome版本,已开启HTML5桌面通知.具体设置见下面截图 2.将这个HTML放到本地Web服务器上测试,直接双击运行无法弹出桌面通知 顺带提下,这个程序很容易扩展成定时通知. 做这个东西的过程有两点比较纠结,总结下: 1.parseInt("09")返回的是0.正确做法是parseInt("09"
-
Android利用RecyclerView实现列表倒计时效果
最近面试时,面试官问了一个列表倒计时效果如何实现,现在记录一下. 运行效果图 实现思路 实现方法主要有两个: 1.为每个开始倒计时的item启动一个定时器,再做更新item处理: 2.只启动一个定时器,然后遍历数据,再做再做更新item处理. 经过思考,包括性能.实现等方面,决定使用第2种方式实现. 实现过程 数据实体 /** * 总共的倒计时的时间(结束时间-开始时间),单位:毫秒 * 例: 2019-02-23 11:00:30 与 2019-02-23 11:00:00 之间的相差的毫秒数
-
JavaScript 实现拖拽效果组件功能(兼容移动端)
页面元素拖拽是一种非常实用的前端效果,基于元素拖拽可以实现很多不同的功能,增加客户端许多操作的便捷性,大大提高用户体验.日常生活中大家多多少少都见过这种效果,所以就不废话了,直接开干吧. 预期目标 实现一个 Class 类,通过该 Class,可以将任意 DOM 元素(比如 div)一键变为可拖拽状态,也可以恢复成原来的状态,例如这样: <!DOCTYPE html> <html lang="en"> <head> <meta charset=
-
JavaScript实现前端倒计时效果
本文实例为大家分享了JavaScript实现前端倒计时效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { padding: 10px; font-size: 100px; } p { floa
-
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
我比较喜欢听音乐,特别是周末的时候,电脑开着百度随心听fm,随机播放歌曲,躺在床上享受.但碰到了一个烦人的事情,想切掉不喜欢的曲子,还得起床去操作电脑换歌.于是思考能不能用手机控制电脑切换歌曲,经过一段事件的思考,绝对采用html5+socket.io来实现这个功能.首先我把该功能的实现拆分为以下几个步骤: 1.移动端前端页面+脚本逻辑实现 2.PC端前端页面+脚本逻辑实现 3.后台逻辑实现 4.加入socket.io实现长连接 5.实现移动端控制PC端逻辑 1.移动端页面脚本的实现 html页
-
typescript+react实现移动端和PC端简单拖拽效果
本文实例为大家分享了typescript+react实现移动端和PC端简单拖拽效果的具体代码,供大家参考,具体内容如下 一.移动端 1.tsx代码 import { Component } from "react"; import './Tab.less' interface Props { } interface user { id: string, text: string } interface content { id: string, text: string } inter
-
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,以下实现思路经过小编测试过,放心使用. 1.效果图 PC端访问显示: 移动端访问显示: 2.实现: 不考虑移动端搜索引擎优化的话,只需要通过JS判断是否移动端,然后确定是否跳转到指定页面就行了,主要JS如下: //判断是否移动端,如果是则跳转到指定的URL地址 function browserRedirect(url) { //只读的字符串,
-
使用vue实现简单键盘的示例(支持移动端和pc端)
常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用 实现效果: Keyboard.vue <template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList"> <template v
-
Thinkphp通过一个入口文件如何区分移动端和PC端
废话不多说了,直接给大家贴代码了,具体代码如下所示: <?php // 检测PHP环境 if(version_compare(PHP_VERSION,'5.3.0','<')) die('require PHP > 5.3.0 !'); // 开启调试模式 建议开发阶段开启 部署阶段注释或者设为false define('APP_DEBUG',True); define('MULTI_MODULE', false); // 获取当前文件所在的目录 define('DKSITE_TSDIR