高考倒计时源码-旋转星空html,css,js

最新推荐文章于 2024-10-11 11:50:00 发布

meowrain

最新推荐文章于 2024-10-11 11:50:00 发布

阅读量3.6k

点赞数 7

分类专栏： HTML 文章标签： javascript css html5

本文链接：https://blog.csdn.net/a18434646561/article/details/113407379

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

高考倒计时源码

样式展示：
在这里插入图片描述

源码部分

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高考倒计时</title>
</head>

<link rel="stylesheet" href="gaokao.css">
<link rel="stylesheet" href="sky.css">
<script src="sky.js"></script>

<body>

    <div class="all">
        <div id="wrap">
            
            <canvas id="canvas" width="1920" height="1080"></canvas>
        </div>

<div id="Reporting">
<script language="javaScript" >
now = new Date(),hour = now.getHours()
if (hour<6){document.write(" 凌晨好！同学！")}
else if (hour<9){document.write("早上好，同学！")}
else if (hour<12){document.write("上午好，同学!")}
else if (hour<14){document.write("中午好，同学！")}
else if (hour<17){document.write("下午好！同学！")}
else if (hour<19){document.write("傍晚好！同学！")}
else if (hour<22){document.write("晚上好！同学！")}
else {document.write("夜深了，学习注意眼睛哦！")}
</script>
</div>

<h2> ·距离2022年高考还有·</h2>

<div id="timer"></div>
<script language="javascript" type="text/javascript">
    timer('2022-06-07 0:00:00','day');
 
    /**
     * 入参第一个为时间字符串，第二个参数为模式选择，如果传入'day'，按天数倒计时到秒，不传值，按小时精确到秒
     * @param timeStr
     * @param item
     */
    function timer(timeStr,item){
        setInterval(function(){
            let nowTime = new Date(timeStr) - new Date;
            let minutes = parseInt(nowTime / 1000 / 60 % 60, 10);//计算剩余的分钟
            let seconds = parseInt(nowTime / 1000 % 60, 10);//计算剩余的秒数
 
 
            minutes = checkTime(minutes);
            seconds = checkTime(seconds);
            if(item==='day'){
                let days = parseInt(nowTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
                let hours = parseInt(nowTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
                days = checkTime(days);
                hours = checkTime(hours);
                document.getElementById('timer').innerHTML=days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
            }
            else{
                let hours = parseInt(nowTime / ( 1000 * 60 * 60), 10); //计算剩余的小时
                hours = checkTime(hours);
                document.getElementById("timer").innerHTML = hours + "小时" + minutes + "分" + seconds + "秒";
            }
        },1000);
    }
 
    function checkTime(i) { //将0-9的数字前面加上0，例1变为01
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
</script>


<a class="brinks">寄语：在奋斗的过程中，常会遭受挫折，惟有坚持到底，才会获得最后的成功！</a>	

<hr>
<div class="bottomsay"></div>
<details>
<summary>
关于
</summary>
<p class="bottomsay">创作者：猫狗鼠鱼</p>
<p class="bottomsay">本版本为未减假期与睡觉时间的正常版本</p>
<hr>
<p class="bottomsay">减时版：</p>
<a href="https://catdog007.icu/HTML/timer/timer.html" class="bottomsay">高考倒计时减时版</a>
<p class="bottomsay">感谢支持！</p>
</details>
</div>


</body>
</html>

gaokao.css源码

body {
     background: #050801;

}
.all  {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #050801;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    height: 100vh;
    position: relative;
    z-index: 1;
}

    #timer {
        font-size: 100px;
        font-weight: bold;
        z-index:2;
        text-align: center;
        color: #ed3333;
        margin: 80px 80px;
        
    }
    .brinks {
        display:flex;
        z-index:1;
        position: relative;
        justify-content:center;
        font-weight: bold;
        background-image: linear-gradient( to left, orangered, orange, gold, lightgreen, cyan, dodgerblue, mediumpurple, hotpink, orangered);
        background-size: 110vw;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-animation: rainbowan 60s linear infinite;
    }

.bottomsay{
   color:white;
   display: flex;
   justify-content: center;
   list-style: none;
}
.bottomsay ul {
      list-style: none; 
}
summary {
    color:white;
    text-align: center;
}
h2 {
    display:flex;
    z-index:2;
    position: relative;
    justify-content:center;
    background-image: linear-gradient( to left, orangered, orange, gold, lightgreen, cyan, dodgerblue, mediumpurple, hotpink, orangered);
    background-size: 110vw;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-animation: rainbowan 60s linear infinite;
}
#Reporting {
    display:flex;
    margin-right: 3px;
    margin-bottom: 3px;
    color: white;
    flex-direction: row-reverse;
}
@-webkit-keyframes rainbowan {
    to {
        background-position: -2000vw;
    }
}

@keyframes rainbowan {
    to {
        background-position: -2000vw;
    }
}

星空背景css sky.css

html, body {
    height: 100%;
    margin: 0;
    overflow: auto;
    width: 100%;

}

#wrap {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: -1;
}

canvas {
    display: block;
}

星空背景js sky.js

'use strict';

{
    window.onload = function () {
        const canvas = document.querySelector('canvas');
        if (typeof canvas.getContext === 'undefined') {
            return;
        }
        const ctx = canvas.getContext("2d");


        // Canvas Resize
        function fitCanvasSize() {

            canvas.width = document.documentElement.clientWidth;
            canvas.height = document.documentElement.clientHeight;

        }
        fitCanvasSize();
        window.onresize = fitCanvasSize;

        // RequestAnimationFrame
        (function () {
            var requestAnimationFrame = window.requestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame;
            window.requestAnimationFrame = requestAnimationFrame;
        })();

        const colors = ['#000030', '#4d4398', '#4784bf', '#000030', '#4d4398', '#ffffff']

        //Utility Function
        function randomIntFromRange(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }

        function randomColor(colors) {
            return colors[Math.floor(Math.random() * colors.length)]
        }

        // Objects
        function Particle(x, y, radius, color) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.color = color;
            this.radians = Math.random() * Math.PI * 2;
            this.velocity = 0.001;
            this.distanceFormCenter = randomIntFromRange(10, canvas.width / 2 + 100);

            this.update = () => {

                // Move points over time
                this.radians += this.velocity;

                //Circular Motion
                this.x = Math.cos(this.radians) * this.distanceFormCenter + canvas.width / 2;
                this.y = Math.sin(this.radians) * this.distanceFormCenter + canvas.height / 2;
                this.draw();
            }

            this.draw = () => {
                ctx.beginPath();
                ctx.fillStyle = this.color;
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                ctx.globalAlpha = .8;
                ctx.fill();
            };
        }

        // Implementation
        let perticles;
        function init() {
            perticles = []

            for (let i = 0; i < 1200; i++) {
                const radius = (Math.random()) + .5;
                perticles.push(new Particle(canvas.width / 2, canvas.height / 2, radius, randomColor(colors)));
            }
        }

        // Animation Loop
        function animate() {
            requestAnimationFrame(animate);
            var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
            g.addColorStop(0, 'rgba(19,27,35,.05)');
            g.addColorStop(1, 'rgba(10,20,67,.05)');
            ctx.fillStyle = g;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            perticles.forEach(perticles => {
                perticles.update();
            });
        }

        init();
        animate();
    }
}

发展历程：