Html+Css+js实现春节倒计时效果（移动端和PC端）

最新推荐文章于 2024-07-16 15:25:44 发布

前端码农..

最新推荐文章于 2024-07-16 15:25:44 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/BYGFJ/article/details/122664227

版权

本文介绍了如何使用HTML、CSS和JavaScript实现适用于移动端和PC端的春节倒计时效果，包括各部分的代码实现和效果演示。

摘要由CSDN通过智能技术生成

效果预览

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

最低0.47元/天解锁文章

前端码农..

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Html+Css+js实现春节倒计时效果（移动端和PC端）

效果预览html部分<!DOCTYPE html> <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">...
复制链接

扫一扫