demo8-兼容性一般的网页登陆以及主页面，js的初次使用

于 2021-03-13 00:27:08 发布
阅读量79 收藏
点赞数
文章标签： css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wafer_biscuit/article/details/114715188
版权

有段时间没有布局了，在2K屏下布局，中途转移到了1080p，导致兼容性不行(不用框架是我最后的骄傲。。)以后有时间练习下，急急急
有时间买几本画集和美术册，提升下审美基础
log

<!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">
    <link rel="stylesheet" href="CSS/main.css">
    <title>Document</title>
</head>

<body>
    <div class="bg">
        <div class="col"></div>
    </div>
    <div class="main">
        <form action="maiii.html">
            <div class="pp">
                <p class="p1">WELCOME BACK</p>
            </div>
            <div class="log" >
                <div class="i">
                    <input type="text" name="uname" id="">
                </div>
                <div class="ii">
                    <input type="password">
                </div>
            </div>
            <button type='submit'>LOGGIN
                <div class="bu"></div>
            </button>
        </form>
    </div>
</body>

</html>

main

<!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">
    <link rel="stylesheet" href="CSS/two.css">
    <title>Document</title>
</head>

<body>
    <div class="timer">
        <div class="h">1</div>
        <div class="m">2</div>
        <div class="s">3</div>
    </div>
    <script>
        count();        //先调用下，使得连贯
        function count() {
            var d = new Date();
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();
            var hour = document.querySelector('.h');
            var min = document.querySelector('.m');
            var sec = document.querySelector('.s');
            h > 10 ? h : '0' + h;
            m > 10 ? m : '0' + m;
            s > 10 ? s : '0' + s;
            hour.innerHTML=h;
            min.innerHTML=m;
            sec.innerHTML=s;
        }
        setInterval(count,1000);
    </script>
    <p></p>
    <div class="btns">
        <button class="b1">SURE</button>
        <button class="b2">N O</button>
    </div>
    <div class="toybox">
        <div class="toy"></div>
        <button class="t">-></button>
    </div>
    <script>
        console.log(location.search);
        var str = location.search.substr(1);
        var arr=str.split('=');
        var p1=document.querySelector('p');
        p1.innerHTML =arr[1]+',Its nice to see you AGAIN.</br>HOW ABOUT PLAY SOME GAME?'
        var b2=document.querySelector('.b2');
        var b1=document.querySelector('.b1');
        var bo=document.querySelector('body');
        b2.addEventListener('click',function(){
            p1.style.display='none';
            b2.style.display='none';
            b1.style.display='none';
            alert('FINE,ENJOY your V time');
            document.body.style.background='black'
        });

        var t=document.querySelector('.t');
        var toy=document.querySelector('.toy');
        var tb=document.querySelector('.toybox');
        b1.addEventListener('click',function(){
            // y.style.background='rgba(221, 113, 149,0.3)';
            t.style.display='block';
            tb.style.display='block';
            toy.style.display='block';
            console.log('aaa');
        });
        t.addEventListener('click',function(){
            toy.style.left=toy.offsetLeft+40+'px'
            if(toy.offsetLeft>800){        //注意这里！
                tb.style.display='none';
                t.style.display='none';
                toy.style.display='none';
                alert('CANT belived you did it!')
            }
        });
    </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">
    <link rel="stylesheet" href="CSS/two.css">
    <title>Document</title>
</head>

<body>
    <div class="timer">
        <div class="h">1</div>
        <div class="m">2</div>
        <div class="s">3</div>
    </div>
    <script>
        count();        //先调用下，使得连贯
        function count() {
            var d = new Date();
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();
            var hour = document.querySelector('.h');
            var min = document.querySelector('.m');
            var sec = document.querySelector('.s');
            h > 10 ? h : '0' + h;
            m > 10 ? m : '0' + m;
            s > 10 ? s : '0' + s;
            hour.innerHTML=h;
            min.innerHTML=m;
            sec.innerHTML=s;
        }
        setInterval(count,1000);
    </script>
    <p></p>
    <div class="btns">
        <button class="b1">SURE</button>
        <button class="b2">N O</button>
    </div>
    <div class="toybox">
        <div class="toy"></div>
        <button class="t">-></button>
    </div>
    <script>
        console.log(location.search);
        var str = location.search.substr(1);
        var arr=str.split('=');
        var p1=document.querySelector('p');
        p1.innerHTML =arr[1]+',Its nice to see you AGAIN.</br>HOW ABOUT PLAY SOME GAME?'
        var b2=document.querySelector('.b2');
        var b1=document.querySelector('.b1');
        var bo=document.querySelector('body');
        b2.addEventListener('click',function(){
            p1.style.display='none';
            b2.style.display='none';
            b1.style.display='none';
            alert('FINE,ENJOY your V time');
            document.body.style.background='black'
        });

        var t=document.querySelector('.t');
        var toy=document.querySelector('.toy');
        var tb=document.querySelector('.toybox');
        b1.addEventListener('click',function(){
            // y.style.background='rgba(221, 113, 149,0.3)';
            t.style.display='block';
            tb.style.display='block';
            toy.style.display='block';
            console.log('aaa');
        });
        t.addEventListener('click',function(){
            toy.style.left=toy.offsetLeft+40+'px'
            if(toy.offsetLeft>800){        //注意这里！
                tb.style.display='none';
                t.style.display='none';
                toy.style.display='none';
                alert('CANT belived you did it!')
            }
        });
    </script>
</body>
*{
    padding: 0;
    margin: 0;
}
body{
    /* position: relative; */
    width: 100%;
    height: 100vh;
    background: repeating-linear-gradient(45deg,rgba(233, 78, 104,0.5) 0 ,rgba(233, 78, 104,0.5) 25px,rgba(236, 100, 168, 0.4) 0 ,rgba(236, 100, 168, 0.4) 50px);
    /* filter: blur(1px); */
}
/* .col2{
    position: absolute;
    width: 80%;
    height: 90%;
    background: linear-gradient(to right,rgba(231, 11, 3, 0.7),rgba(8, 69, 238, 0.8));
    bottom: 0;
    bottom: 0;
    border-radius: 20%;
} */
.timer{
    margin: 0 auto;
    display: flex;
    padding-top: 5%;
    width: 60%;
    height: 20%;
    /* background-color: pink; */
}
.timer div{
    flex: 1;
    height: 100%;
    /* background-color: plum; */
    border:10px solid rgba(202, 37, 231, 0.4);
    border-collapse:collapse;
    font-size: 70px;
    background-color: black;
    color: whitesmoke;
    font-weight: 700;
    text-align: center;
    line-height: 160px;
}
p{
    width: 70%;
    height: 50%;
    background: linear-gradient(to right,rgba(245, 5, 5, 0.4),rgba(245, 99, 2, 0.4));
    margin: 100px auto;
    text-align: center;
    line-height: 100px;
    font-size: 60px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    border-radius: 120px;
}
.btns{
    position: absolute;
    top: 76%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 100px;
    /* background-color: whitesmoke; */
}
 .btns button[class^="b"]{
    border: none; 
    /* box-shadow:-214px 0px 0px palevioletred; */
    outline: none;
    background-color: rgb(230, 84, 109);
    width: 20%;
    height: 100px;
    border-radius: 40px;
    font-size: 40px;
    color: whitesmoke;
    margin-left: 100px;
 }
body .btns .b2{
    /* background-color: tomato; */
    margin-left: 460px;
}
.toybox{
    position: absolute;
    top: 60%;
    left: 4%;
    width: 70%;
    height: 400px;
    background-color: rgba(238, 230, 232, 0.418);
    display: none;
}
.toy{
    position: absolute;
    top: 60%;
    left: 4%;
    width: 100px;
    height: 100px;
    background-color: rgba(199, 6, 38,.5);
    border-radius: 50%;
    display: none;
}
.t{
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 20px;
    background-color: rgba(224, 219, 220, 0.5);
    border: 4px solid rgba(255, 0, 0, 0.685); 
    /* box-shadow:-214px 0px 0px palevioletred; */
    outline: none;
    display: none;
    /* display: block; */
}
</html>
my威化饼干
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值