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

最新推荐文章于 2023-08-19 10:30:39 发布

meowrain

最新推荐文章于 2023-08-19 10:30:39 发布

阅读量3.5k

点赞数 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();
    }
}

发展历程：

高考倒计时发展历程：[]

高考倒计时V1.O

这是我利用挤出来的时间写的一个高考倒计时，起初它是这样的

没错，仅仅是这样的，后面没有星星转动的背景，也没有炫动的字体，仅仅这么冰冷，挂在我的hexo博客上，现在依然在

后来感觉丑的一批（大概是我还年轻，比较喜欢花里胡哨的东西）

高考倒计时V2.0

因为看上去不怎么舒服，我就给它加了css样式，

改的过程中遇到挺多问题，比如星空盖住了字，后来问群里大佬才发现（卧槽，我sha了，没想到z-index层级属性，折腾了半个小时才弄好）

星空背景
炫动字符
js判断时间并在早上输出早上好同学，中午的时候输出中午好同学，晚上的时候输出晚上好同学

高考倒计时V3.0 -（减时版）

在写好正常版本后，我脑子一抽，就想出一点子，诶，这500多天，每天还要睡觉吃饭喝水发呆，每个月还要放几天假，还有各种节假日，隔了这么久，假期和休息时间一定不少，于是，高考倒计时3.0版本来了，船新版本！

没错，它就是高考倒计时减时版

时间活活少了一半多。。。。uysy，这时间还是有吓到我的，不过我的心态还好，

嘻嘻……

计算方法：

下面是计算方法：

1.以下将按照中午从放学开始不学习到下午2点去上课，晚上从0:00睡到第二日5:30为准共计7个小时30分钟

2.睡觉时长：162.1875天 = 3892.5小时 ps:算了以下突然发现睡的时间好长

3.接下来我们减去放假天数，法定节假日：11天》节假日 11天

4.2021年平年：每年有52周，我们放假周是26个周中的周日，即为26天 2022年13天》 39天
5.接下来算寒假暑假，按照我们学校的尿性，寒假14天，暑假拿30天算吧 …计算一下 44天 257天在：放假+睡觉

吐槽：目前看来，这个寒假放得确实挺长，按以前我们现在应该才刚放假。。。

大家可以看一下，我这个可能计算的不准确，毕竟。。瞎算一气。。。算的准确的可以在弹幕或者评论里给我留言一下哈！

我的博客： https://catdog007.icu

meowrain

关注

7
点赞
踩
28

收藏

觉得还不错? 一键收藏
1
评论
高考倒计时源码-旋转星空html,css,js

高考倒计时源码样式展示：源码部分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 s
复制链接

扫一扫