jsREtake01-03（tab栏、显示、计算器ver0.1）

最新推荐文章于 2022-03-27 16:59:45 发布

my威化饼干

最新推荐文章于 2022-03-27 16:59:45 发布

阅读量285

点赞数

文章标签： javascript js css

本文链接：https://blog.csdn.net/wafer_biscuit/article/details/114806651

版权

<!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>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    .tabbox {
        margin: 100px auto;
        width: 600px;
        height: 400px;
        background-color: pink;
        /* display: flex; */
    }
    .tabbox .tab{
        display: flex;
    }
    .tabbox .tab li{
        flex: 33.33%;
        background-color: rgba(177, 51, 177, 0.678);
        height: 130px;
        text-align: center;
        line-height: 130px;
        border: 3px solid gray;
    }
</style>

<body>
    <div class="tabbox">
        <ul class="tab">
            <li>change1</li>
            <li>change2</li>
            <li>change3</li>
        </ul>
        <ul class="main">
            <li>main111111</li>
            <li>main222222</li>
            <li>main333333</li>
        </ul>
    </div>
    <script>
        var tabbox=document.querySelector('.tabbox');
        var tab=document.querySelector('.tab');
        var tablis=document.querySelector('.tab').getElementsByTagName('li');
        var main=document.querySelector('.main');
        var mainlis=document.querySelector('.main').getElementsByTagName('li');

        // console.log(mainlis);
        for(var i=0;i<mainlis.length;i++){
            mainlis[i].setAttribute('index',i); //添加自定义属性
            tablis[i].setAttribute('index',i); //添加自定义属性
            mainlis[i].style.display='none';    //防止不点击时候全部显示
            tablis[i].addEventListener('click',function(){
                var itsindex=this.getAttribute('index');    //成了！获取到点击的具体顺序值
                console.log(itsindex);
                for(var j=0;j<mainlis.length;j++){
                    mainlis[j].style.display='none';
                    tablis[j].style.background='rgba(177, 51, 177, 0.678)';
                }
                mainlis[itsindex].style.display='block';
                tablis[itsindex].style.background='white';
            });
            // console.log(i);
        }
        console.log(mainlis[0]);
    </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>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    ul li {
        list-style: none;
        box-sizing: border-box;
    }

    .main {
        background-color: pink;
        position: relative;
        left: 50vh;
        /* display: flex; */
        height: 100px;
        /* width: 400px; */
        margin: 20px auto;
    }

    .main li {
        /* flex: 1; */
        float: left;
        background-color: rgba(168, 76, 168, 0.493);
        text-align: center;
        width: 100px;
        line-height: 100px;
        border: 1px solid rgb(14, 13, 13);
        /* margin-left: -2px; */
    }
</style>

<body>
    <ul class="main">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
        var lis = document.querySelector('.main').querySelectorAll('li');
        var main=document.querySelector('.main');
        console.log(lis);
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i);
            lis[i].addEventListener('click', function () {
                var itsindex = this.getAttribute('index');
                for(var j=0;j<lis.length;j++){
                    lis[j].style.width='100px';
                }
                console.log(itsindex);
                // var long=600;
                // long+=200;
                // main.style.width=long+'px';
                lis[itsindex].style.width = '200px';
            });
        }//挺有意思，可惜并不是我们想要的那种效果~_~(现在是了，以前是类似于叠砖块的效果)
    </script>
    <!-- 简单的方法重写，直接拿到下面，不写onload就行 -->
</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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        /* 为啥写成body不行？ */
        box-sizing: border-box;
    }

    ul {
        list-style: none;
    }

    ul li {
        box-sizing: border-box;
    }

    .cal {
        width: 400px;
        height: 600px;
        margin: 10px auto;
        background-color: pink;
    }

    .cal .screen {
        height: 120px;
        width: 400px;
        background-color: powderblue;
        border: 20px solid rgba(230, 118, 118, 0.4);
        line-height: 120px;
        font-size: 24px;
    }

    /* .cal .btnlis {
        display: flex;
    } */

    .cal .btnlis .btn {
        /* flex: 33.33%; */
        float: left;
        width: 33.33%;
        height: 100px;
        background-color: powderblue;
        border: 1px solid black;
        text-align: center;
        line-height: 100px;
        font-size: 40px;
        /* margin: 10px; */
        /* flex-wrap:wrap ; */
    }
</style>

<body>
    <div class="cal">
        <div class="screen">123</div>
        <ul class="btnlis">
            <li class="btn num">0</li>
            <li class="btn num">1</li>
            <li class="btn num">2</li>
            <li class="btn num">3</li>
            <li class="btn num">4</li>
            <li class="btn num">5</li>
            <li class="btn num">6</li>
            <li class="btn num">7</li>
            <li class="btn num">8</li>
            <li class="btn num">9</li>
            <li class="btn symbol plus">+</li>
            <li class="btn symbol del">-</li>
            <li class="btn symbol times">X</li>
            <!-- 乘以的英语居然是times。。 -->
            <li class="btn symbol clear">CLEAR</li>
            <li class="btn symbol equal">=</li>
        </ul>
    </div>
    <script>
        var nums = document.querySelectorAll('.num');       //get数字集合
        var symbols = document.querySelectorAll('.symbol');   //get非数字集合
        var plus = document.querySelector('.plus');
        var btns=document.querySelectorAll('li');
        var screen=document.querySelector('.screen');

        // console.log(symbols);
        // console.log(nums);
        var sum = 0;
        var a = 0, b = 0;
        var str1 = '';
        var count=0;


            // for (var j = 0; j < symbols.length; j++) {
            //     symbols[j].addEventListener('click', function () {
            //         return true;
            //     });
            // }


        for (var i = 0; i < btns.length; i++) {
            btns[i].setAttribute('val', i);
            btns[i].addEventListener('click', function () {
                var itsindex = this.getAttribute('val');
                if(itsindex<10){
                    str1 += itsindex;
                    screen.innerHTML=str1;
                }else if(itsindex==10){
                    a=parseInt(str1);
                    count++;
                    screen.innerHTML=btns[itsindex].innerHTML;
                    str1=''
                }else if(itsindex==14){   
                    b=parseInt(str1);
                    sum=a+b;
                    screen.innerHTML=sum;
                }else if(itsindex==11){
                    a=parseInt(str1);
                    sum+=a;

                }
                // console.log(itsindex);
                console.log(a+'a ');
                console.log(b+'b ');
                // console.log(str1);      //成功get到点击的数组(字符串形式)
            });
        }


        // while (true) {

        // }
    </script>
</body>

</html>

my威化饼干

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsREtake01-03（tab栏、显示、计算器ver0.1）

<!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>Do
复制链接

扫一扫