周结-阿里云开发者社区

周结

2022-10-18 80

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 周结

js制作倒计时效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url(images/23on23-01_2.jpg) no-repeat -60px -80px;
        }
        img {
            width: 100%;
            height: 100%;
        }
        div {
            margin: 200px;
        }
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color:#fff;
            font-size: 20px;
            color: red;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>
        距离高考还有
        <span class="tian">0</span>
        天
        <span class="hour">1</span>
        时
        <span class="minute">2</span>
        分
        <span class="second">3</span>
        秒
    </div>
    <script>
        // 1.获取元素
        var tian = document.querySelector('.tian') //天数的盒子
        var hour = document.querySelector('.hour') //小时的盒子
        var minute = document.querySelector('.minute') //分钟的盒子
        var second = document.querySelector('.second') //秒数的盒子
        var inputTime = +new Date('2021/6/7 9:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2.开启定时器
        setInterval(countDown,1000)
        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
            var t = parseInt(times/60/60/24)
            t = t < 10 ? '0' + t : t;
            tian.innerHTML = t;
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s
        }
    </script>
</body>
</html>

仿新浪注册页面案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }
        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>
</head>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        var inp = document.querySelector('.ipt')
        var p = document.querySelector('.message')
        inp.onblur = function() {
            if(this.value.length<6 || this.value.length>16) {
                p.className = 'message wrong'
                p.innerHTML = '您的输入有误'
            } else {
                p.className = 'message right'
                p.innerHTML = '您输入的正确'
            }
        }
    </script>
</body>
</html>

仿淘宝固定模块和返回顶部案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }
        .w {
            width: 1200px;
            margin: 10px auto;
        }
        .header {
            height: 150px;
            background-color: purple;
        }
        .banner {
            height: 250px;
            background-color: skyblue;
        }
        .main {
            height: 1000px;
            background-color: yellowgreen;
        }
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
    <script>
        var sliderbar = document.querySelector('.slider-bar')
        var banner = document.querySelector('.banner')
        // console.log(banner.offsetTop);
        var bannerTop = banner.offsetTop
         // 当我们侧边栏固定定位之后应该变化的数值
        var sliderTop = sliderbar.offsetTop - bannerTop
        // 获取main主体元素
        var main = document.querySelector('.main')
        var goBack = document.querySelector('.goBack')
        var mainTop = main.offsetTop
        // scroll页面滚动模块
        document.addEventListener('scroll',function() {
            // window.pageYOffset页面被卷去的头部
            // console.log(window.pageYOffset);
            // 当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
            if(window.pageYOffset>=bannerTop) {
                sliderbar.style.position = 'fixed'
                sliderbar.style.top = sliderTop + 'px'
            } else{
                sliderbar.style.position = 'absolute'
                sliderbar.style.top = '300px'
            }
            if(window.pageYOffset>=mainTop) {
                goBack.style.display = 'block'
            } else{
                goBack.style.display = 'none'
            }
        })
        goBack.addEventListener('click',function(){
            // 里面的x,y不加单位
                // window.scroll(0,0)
                // 因为是窗口滚动,所以目标是window
                animate(window, 0)
            })
            //动画函数
        function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - window.pageYOffset) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (window.pageYOffset == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        // obj.style.left = window.pageYOffset + step + 'px';
        window.scroll(0,window.pageYOffset + step)
    }, 15);
}
    </script>
</body>
</html>

文章标签：

JavaScript

周结

js制作倒计时效果

仿新浪注册页面案例

仿淘宝固定模块和返回顶部案例

热门文章

最新文章

相关电子书