web实验二-part1

需求

利用js输出菱形图案

image-20211215215308929

提示

利用document.write()输出空格、*号和换行符。分正三角形和倒三角形输出

思路

因为考虑到该图像是由正三角形和倒三角形,那么我们就可以分成两个函数分别去计算,考虑到和用户去交互,我们通过用户输入去改变这个菱形的大小

Code

<!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>
    <script>
        function space(n) {
            for(let i = 0;i < n; ++i) document.write("&nbsp");
        }
        function up(n){
            for(let i = 1;i <= n; ++i) {
                space(n-i);
                for(let j = 1;j <= i; ++j){
                    if(j == i)
                        document.write("*");
                    else
                        document.write("**");
                }
                space(n-i);
                document.write("</br>");
            }
        }
        function down(n){
            for(let i = 1;i <= n; ++i) {
                space(i);
                for(let j = 1;j <= n-i+1; ++j) {
                    if(j == n-i+1)
                        document.write("*");
                    else 
                        document.write("**");
                }
                space(i);
                document.write("</br>");
            }
        }
        let n = prompt("请输入图形的n:");
        if(n < 1) {
            alert("N太小了!请刷新重写输入!");
        }
        else {
            up(n);
            down(n-1);
        }

    </script>

</head>
<body>

</body>
</html>

web实验二-part2

需求

完成网页动态时间,鼠标移入时,停止更新时间,移除时,再次更新时间

提示

完成显示时间的函数

利用定时函数,定时刷新页面

利用clearXXX函数停止更新

思路

  • 我们首先要显示该时间,那么通过getElementById找到我们显示时间的标签,然后通过innerHTML来更新时间
  • 要完成鼠标移入停止更新时间,移开继续更新,我们需要判断鼠标的是否在标签上,通过onmouseover可以知道鼠标移上来了,onmouseout可以知道鼠标移开了
  • 我们通过clearTimeout函数就可以实现停止更新

Code

<!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>

<body>
    <p id="showTime" onmouseover="stop()" onmouseout="showTime()"></p>
    <script>
        let timeoutId;
        function showTime(){
            let date = new Date();
            let hour = date.getHours();
            let min = date.getMinutes();
            let second = date.getSeconds();
            document.getElementById("showTime").innerHTML="时间:"+hour+":"+min+":"+second+"。"
            timeoutId = setTimeout(showTime,1000);
        }
        function stop(){
            clearTimeout(timeoutId);
        }
        showTime();
    </script>
</body>
</html>

web实验三

需求

  • 将素材页面中的商品,按价格进行排序。

  • 多次点击排序按钮,商品按价格升序和降序交替排列

  • 第一次点击排序,所有商品按价格升序排列

  • 随着升序与降序排列,箭头符号成上下的形状

提示

利用数组的sort函数和js对象完成排序。然后操作dom,重排页面

思路

  • 我们通过getElementById定位到商品列表,然后获取到每个列表单个对象元素通过sort函数排序就能先递减排序
  • 我们通过将从后往前的方式将单个元素一次添加到末尾,然后能获得一个递增的序列,然后通过将从前往后的方式将单个元素添加到末尾就能获得一个递减的序列

Code

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css.css"/>
    <!-- <script src="js.js"></script> -->
    <script>
        let flag = 1;

        function init(){
            let parent = document.getElementById("pricesList");
            let domArr = [];
            for(let i = 0;i < parent.childNodes.length;++i) {
                let obj={};
                if(parent.childNodes[i].nodeType == 1) {
                    obj.dom = parent.childNodes[i];
                    obj.price = obj.dom.lastElementChild.innerHTML.trim().substring(3);
                    domArr.push(obj);
                }
            }
            domArr.sort(function(a,b){
                return a.price - b.price;
            });
            return domArr;
        }
        let domArr;
        window.onload = function(){
            domArr = init();
        }

        function sort() {
            let span = document.getElementsByTagName("span")[0];
            if(flag) {
                flag = 0;
                span.className = "up";
                for(let i = 0;i < domArr.length; ++i) {
                    domArr[0].dom.parentNode.appendChild(domArr[i].dom);
                }
            }
            else {
                flag = 1;
                span.className = "down";
                for(let i = domArr.length - 1; i >= 0; --i) {
                    domArr[0].dom.parentNode.appendChild(domArr[i].dom);
                }
            }
        }
        </script>
</head>
<body>
    <nav onclick="sort()">排序(价格) <span class="down"></span></nav>
    <ul id="pricesList">
        <li>
            <div>
                <img src="image/baby_1.jpg" alt=""/>
            </div>
            <p>
                产品1
            </p>
            <p>
                价格:345.00
            </p>
        </li>
        <li>
            <div>
                <img src="image/baby_2.jpg" alt=""/>
            </div>
            <p>
                产品2
            </p>
            <p>
                价格:133.00
            </p>
        </li>
        <li>
            <div>
                <img src="image/baby_3.jpg" alt=""/>
            </div>
            <p>
                产品3
            </p>
            <p>
                价格:52.00
            </p>
        </li>
        <li>
            <div>
                <img src="image/baby_4.jpg" alt=""/>
            </div>
            <p>
                产品4
            </p>
            <p>
                价格:223.00
            </p>
        </li>
        <li>
            <div>
                <img src="image/baby_5.jpg" alt=""/>
            </div>
            <p>
                产品5
            </p>
            <p>
                价格:655.00
            </p>
        </li>
        <li>
            <div>
                <img src="image/baby_6.jpg" alt=""/>
            </div>
            <p>
                产品6
            </p>
            <p>
                价格:142.00
            </p>
        </li>
    </ul>

</body>
</html>

本当の声を響かせてよ