js基础第三天-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45356160/article/details/127985095

js基础第三天

循环for
数组
综合案例

循环for

在这里插入图片描述

数组

在这里插入图片描述

综合案例

在这里插入图片描述 学到的知识:
1.柱状图自己写的太麻烦了,copy别人的学学自己改改
2.* { box-sizing: border-box; }内减模式,默认是外加模式
3.list-style: none;清除前面的小点点,去除列表默认样式

<!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>
    * {
    box-sizing: border-box;
    }

    ul{
        list-style: none;
        height: 300px;
        width: 850px;
        margin: 0 auto;
        padding: 0 0;
        border-left: 1px black solid;
        border-bottom: 1px black solid;
    }
    ul li{
        position: relative;
        display: inline-block;
        height: 300px;
        width: 200px;
    }
    ul li .tu{
        position: absolute;
        bottom: 0;
        left: 75px;
        width: 50px;
        border: 1px black solid;
        background-color: pink;

    }
    ul li .ziti{
        text-align: center;
    }
   p{
    width: 850px;
    margin: 0 auto;
    
   }
   span{
    display: inline-block;
    width: 200px;
    text-align: center;
   }
</style>
<body>
    <!-- <ul>
        <li>
            <div class="ziti">1</div>
            <div class="tu"style="height:20px"></div>
        </li>
        <li>
            <div class="ziti">2</div>
            <div class="tu"style="height:10px"></div>
        </li>

        <li>
            <div class="ziti">3</div>
            <div class="tu"style="height:100px"></div>   
        </li>

        <li>
            <div class="ziti">4</div>
            <div class="tu"style="height:50px"></div>
        </li>

    </ul>
    <p>
        <span>第一季度</span>
        <span>第二季度</span>
        <span>第三季度</span>
        <span>第四季度</span>
    </p> -->
    <script>
        let a = prompt('第一季度')
        let b = prompt('第二季度')
        let c = prompt('第三季度')
        let d = prompt('第四季度')
        document.write(`
        <ul>
        <li>
            <div class="ziti">${a}</div>
            <div class="tu"style="height:${a}px"></div>
        </li>
        <li>
            <div class="ziti">${b}</div>
            <div class="tu"style="height:${b}px"></div>
        </li>

        <li>
            <div class="ziti">${c}</div>
            <div class="tu"style="height:${c}px"></div>   
        </li>

        <li>
            <div class="ziti">${d}</div>
            <div class="tu"style="height:${d}px"></div>
        </li>

    </ul>
    <p>
        <span>第一季度</span>
        <span>第二季度</span>
        <span>第三季度</span>
        <span>第四季度</span>
    </p>
        `)
        
    </script>
  
</body>
</html>