本

文

摘

要

小伙伴关心的问题：htmlcssjavascript网页制作（htmlcss怎么添加）,本文通过数据整理汇集了htmlcssjavascript网页制作（htmlcss怎么添加）相关信息，下面一起看看。

htmlcssjavascript网页制作（htmlcss怎么添加）

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

歌谣 歌谣 新的一年就要到了 可否写一个春节的倒计时呢 我想看看哪天可以过春节

效果预览

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">

<link rel="stylesheet" href="css/mobile.css">

<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;

总结

在过往的岁月中,我遇到了形形 *** 的人和事情。有的人坚持，有的人放弃。 有的人逆袭，有的人失败。最好的种树是十年前，其次是现在。很高兴遇到你, 愿你的人生多姿多彩，幸福绵绵，好事连连 喜欢请一键三连 谢谢~

————————————————

版权声明：本文为CSDN博主「前端大歌谣」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：Html+Css+js实现春节倒计时效果（移动端和PC端）_geyaoisnice的博客-CSDN博客

更多htmlcssjavascript网页制作（htmlcss怎么添加）相关信息请关注本站，本文仅仅做为展示！