第二次上机测试：JavaScript

爱生活的土豆

于 2023-12-21 15:14:14 发布

阅读量481

点赞数 10

分类专栏：网页设计练习文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2302_80868896/article/details/135120612

版权

网页设计练习专栏收录该内容

12 篇文章

订阅专栏

第一组作业要求：

第二次上机测试：Javascript. (第一组)

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二次上机测试：Javascript</title>
    <style>
        #div2 {
            position: relative;
            top: 30px;
        }

        input {
            background-color: white;
            border-radius: 10%;
        }
    </style>
    <script>

        function bor() {
            var oImg = document.getElementById("img");
            oImg.style.border = "2px solid green";
        }

        function sz() {
            var oImg = document.getElementById("img");
            oImg.style.cssText = "width:50px;height:50px;";
        }

        function reverse() {
            var gender = document.getElementsByName("gender");

            if (gender[0].checked == true) {
                gender[0].checked = "false";
                gender[1].checked = "true";
            } else if (gender[1].checked == true) {
                gender[1].checked = "false";
                gender[0].checked = "true";
            }
        }

    </script>
</head>

<body>
    <div id="div1">
        <img id="img" src="../img/off.gif"><br>
        <input type="button" name="btn1" value="加边框" onclick="bor()">
        <input type="button" name="btn2" value="变成50px宽" onclick="sz()"><br>
    </div>
    <div id="div2">
        <input type="radio" name="gender" value="男" checked>男
        <input type="radio" name="gender" value="女">女<br>
        <input type="button" name="btn3" value="反选" onclick="reverse()">
    </div>
</body>

</html>

运行结果：

//单击“加边框”和“变成50px宽”以及“反选”按钮后：

第二组作业要求：

第二次上机测试：Javascript. (第二组)

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二次上机测试：Javascript</title>
    <style>
        p {
            font-size: 20px;
            text-indent: 40px;
        }
    </style>
    <script>

        function bg() {
            var oP = document.getElementById("p");
            oP.style.backgroundColor = "green";
        }

        function big() {
            var oP = document.getElementById("p");
            oP.style.fontSize = "40px";
            oP.style.textIndent = "80px";
        }

    </script>
</head>

<body>
    <p id="p">“我觉得我们中间出了问题，可能是我太矫情了吧，我每天晚上都会难过，想要跟你说但是又不敢说，怕你烦我，可是我真的心情不好，很不好，可能是我的问题，我不想跟你说我有多难过，我怕你会更难过，但是我自己晚上的时候就会更难过，会想很多，会想以后怎么办？所以今天是肯德基疯狂星期四，谁请我吃？”
    </p>
    <input id="bg" type="button" value="加背景" onclick="bg()">
    <input id="big" type="button" value="字体变大" onclick="big()">
</body>

</html>