html原生js實現99乘法表

本文轉載自查看原文 2020-12-30 22:58 519 html

原生的js實現99乘法表實現選擇下拉框顏色，改變背景顏色為選中的顏色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>九九乘法表</title>
    <style>
        p {
            width: 100px;
            display: inline-block;
            padding: 10px;
            margin: 0;
            font-size: 20px;
            background-color: #FFFFFF;
            border-top: 1px solid black;
            border-right: 1px solid black;
        }
        div {
            display: block;
        }
        #zheng99 {
            width: auto;
            display: inline-block;
            border-left: 1px solid #000000;
            border-bottom: 1px solid #000000;
        }
        #group{
            display: block;
            margin-top: 20px;
            width: 200px;
            height: 50px;
            font-size: 20px;
        }
        #bianse{
            display: inline-block;
            width: 200px;
            height: 60px;
            margin-top: 20px;
            font-size: 20px;
        }
    </style>
</head>

<body>
<h1>9*9乘法表</h1>
<div id="zheng99"></div>
<select id="group">
    <option value="red">紅色</option>
    <option value="yellow">黃色</option>
    <option value="green">綠色</option>
</select>
<button onclick="changeColor()" id="bianse">改變顏色</button>
</body>
<script>
    window.onload = function() {
        for(let i = 1; i <= 9; i++) {
            divs = document.getElementById("zheng99").innerHTML += "<div></div>";
            for(let j = 1; j <= i; j++) {
                document.getElementById("zheng99").getElementsByTagName("div")[i - 1].innerHTML +=
                    "<p>" + j + " x " + i + " = " + (j * i) + "</p>";
            }
        }
    };
    function changeColor() {
        let tag = document.getElementsByTagName('p');
        let select = document.getElementById('group');
        let index = select.selectedIndex;
        let group = select.options[index].value;
        for (let i = 0;i < tag.length; i++){
            tag[i].style.backgroundColor = group;
        }
    }
</script>

</html>

在這段代碼中用到的修改i顏色的核心代碼是

<select id="selectColor">
    <option value="red">紅色</option>
    <option value="yellow">黃色</option>
    <option value="green">綠色</option>
</select>

function changeColor() {
        let tag = document.getElementsByTagName('p');
        let select = document.getElementById('group');
        let index = select.selectedIndex;
        let group = select.options[index].value;
        for (let i = 0;i < tag.length; i++){
            tag[i].style.backgroundColor = group;
        }
    }

　　小伙伴們可以自己試試

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Python 實現99乘法表 java使用普通算法實現99乘法表，使用遞歸實現99乘法表 js實現99乘法表的編寫（雙層for循環與遞歸方法）【Day1】用python實現99乘法表 JAVA - 一個for循環實現99乘法表 python輸出99乘法表 JAVA語言編寫99乘法表 Python之99乘法表代碼 python（7）- 小程序練習：循環語句for，while實現99乘法表 C#使用表達式樹動態調用方法並實現99乘法表