创意计时

最新推荐文章于 2023-07-08 15:19:01 发布

——jinqiang12345

最新推荐文章于 2023-07-08 15:19:01 发布

阅读量175

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/weixin_39927443/article/details/86580225

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

倒计时数字滚动切换(需要的图片放在下面，请下载后改成对应名字,放在同一目录下)

<!DOCTYPE html>
<html>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
<head>
<style>
body {
    background: #607D8B;
}
.numbergroup {
    display: flex;
    justify-content: space-between;
    width: 270px;
    margin: auto;
    background: #e6e3e3;
    padding: 25px;
    position:relative;
	box-shadow:0 10px 5px rgba(0,0,0,.3);
    overflow: hidden;
    border-radius: 5px;
}
.numbergroup:after{
	position:absolute;
	bottom:3%;
	left:1%;
	overflow:hidden;
	width:98%;
	height:94%;
	content:'';
	border-radius:30px;
    z-index: 1;
	box-shadow:inset 0 0 200px #b4b4b4;
}
.number {
    width: 60px;
    height: 90px;
    background: #302f2f;
    font-size: 60px;
    color: #d3d3d3;
    line-height: 90px;
    text-align: center;
    font-family: sans-serif;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    text-shadow: 1px 2px 1px #fff;
    z-index: 2;
    cursor: pointer;
    overflow: hidden;
}
.numberrow {
    width: 60px;
    height: 90px;
}
.maohao {
    width: 15px;
    background: transparent;
    font-size: 60px;
    color: #302f2f;
    line-height: 90px;
    text-align: center;
    font-family: sans-serif;
    z-index: 2;
}
.planegroup {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    position: relative;
    background: url('./earth.png') center center no-repeat;
    background-color: #302f2f;
    background-size: 110% 110%;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,.12);
}
.plane {
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('./plane.png') center top no-repeat;
    background-size: 15% 15%;
}
#plane {
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>
</head>
<body>
    <div class="numbergroup">
        <div class="number">
            <div class="numberrow">0</div>
            <div class="numberrow">1</div>
            <div class="numberrow">2</div>
            <div class="numberrow">3</div>
            <div class="numberrow">4</div>
            <div class="numberrow">5</div>
            <div class="numberrow">6</div>
            <div class="numberrow">7</div>
            <div class="numberrow">8</div>
            <div class="numberrow">9</div>
        </div>
        <div class="number">
            <div class="numberrow">0</div>
            <div class="numberrow">1</div>
            <div class="numberrow">2</div>
            <div class="numberrow">3</div>
            <div class="numberrow">4</div>
            <div class="numberrow">5</div>
            <div class="numberrow">6</div>
            <div class="numberrow">7</div>
            <div class="numberrow">8</div>
            <div class="numberrow">9</div>
        </div>
        <div class="maohao">:</div>
        <div class="number">
            <div class="numberrow">0</div>
            <div class="numberrow">1</div>
            <div class="numberrow">2</div>
            <div class="numberrow">3</div>
            <div class="numberrow">4</div>
            <div class="numberrow">5</div>
            <div class="numberrow">6</div>
            <div class="numberrow">7</div>
            <div class="numberrow">8</div>
            <div class="numberrow">9</div>
        </div>
        <div class="number">
            <div class="numberrow">0</div>
            <div class="numberrow">1</div>
            <div class="numberrow">2</div>
            <div class="numberrow">3</div>
            <div class="numberrow">4</div>
            <div class="numberrow">5</div>
            <div class="numberrow">6</div>
            <div class="numberrow">7</div>
            <div class="numberrow">8</div>
            <div class="numberrow">9</div>
        </div>
    </div>
    <div class="planegroup">
        <canvas id="plane" width="300px" height="300px"></canvas>
        <div class="plane"></div>
    </div>
    
</body>
<script>
    var q = 0, b = 0, s = 0, g = 0;
    var bool = true;
    setInterval(function() {
        if (bool) {
            g = g + 1;
            if (g == 10) {
                s = s + 1;
                g = 0;
                if (s == 6) {
                    b = b + 1;
                    s = 0;
                    if (b == 10) {
                        q = q + 1;
                        b = 0;
                        if (q == 6) {
                            bool = false;
                        }
                    }
                }
            }
        }
        cartoon(q, 0);
        cartoon(b, 1);
        cartoon(s, 2);
        cartoon(g, 3);
    }, 1000);
    function cartoon(s, i) {
        if (s != 0) {
            $('.number:eq('+ i +')').animate({'scrollTop':s * 90}, 500); 
        } else {
            $('.number:eq('+ i +')').scrollTop(0);
        }
    }
    var cvs = document.getElementById("plane").getContext('2d');
    cvs.lineWidth = 2;
    // cvs.strokeStyle = '#FFCC80';
    cvs.strokeStyle = '#FFF';
    cvs.setLineDash([10,5]);
    var i = -0.5;
    var deg = 0;
    setInterval(function() {
        cvs.beginPath();
        cvs.clearRect(0, 0, 300, 300);
        i = i - 0.01;
        if(i <= -2.5) {
            i = -2.5;
        }
        deg -= 1.8
        if (deg == - 360) {
            deg = 0;
        }
        $(".plane").css("transform", 'rotate('+ deg +'deg)');
        $(".planegroup").css("transform", 'rotate('+ Math.abs(deg / 9) +'deg)');
        cvs.arc(150,150,125,i*Math.PI,-0.5*Math.PI);
        cvs.stroke();
    }, 20);
</script>
</html>

在这里插入图片描述

下载地址改为plane.png
图片下载地址改为earth.png

——jinqiang12345

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创意计时

倒计时数字滚动切换(需要的图片放在下面，请下载后改成对应名字,放在同一目录下)&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;script src=&amp;quot;https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js&amp;quot;&amp;amp;gt;
复制链接

扫一扫