Html版本的乘法口诀代码 

javascript乘法口诀表 html乘法口诀表代码_i++

 

<!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;
        }
        #cheng99 {
            width: auto;
            display: inline-block;
            border-left: 1px solid #000000;
            border-bottom: 1px solid #000000;
        }
        #group{
            display: block;
            margin-top: 20px;
            width: 200px;
        }
        #bianse{
            display: inline-block;
            width: 200px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
<h1>9*9乘法表</h1>
<div id="cheng99"></div>

<br/>
<br/>
输入你想打印的乘法口诀: <input type="text" name="numKey" />
<button onclick="reload()" id="reprint">确认</button>  <button onclick="delOneline()" id="delOneline">来人删一行</button>





</body>
<script>
    var globV = 9;
    window.onload = function() {
        for(let i = 1; i <= 9; i++) {
            divs = document.getElementById("cheng99").innerHTML += "<div></div>";
            for(let j = 1; j <= i; j++) {
                document.getElementById("cheng99").getElementsByTagName("div")[i - 1].innerHTML +=
                    "<p>" + j + " x " + i + " = " + (j * i) + "</p>";
            }
        }
    };


    function reload(){
        let num = document.getElementsByName('numKey')[0].value;
        console.log(num);
        if(num>9 || num<1 ){
            alert("num must >0 && num<=9");
        }
        globV=num;
        document.getElementById("cheng99").innerHTML="";
        for(let i = 1; i <= num; i++) {
            divs = document.getElementById("cheng99").innerHTML += "<div></div>";
            for(let j = 1; j <= i; j++) {
                document.getElementById("cheng99").getElementsByTagName("div")[i - 1].innerHTML +=
                    "<p>" + j + " x " + i + " = " + (j * i) + "</p>";
            }
        }

    }

    function delOneline(){
        num=globV-1;
        globV=num;
        console.log(num);
        globV=num;
        document.getElementById("cheng99").innerHTML="";
        for(let i = 1; i <= num; i++) {
            divs = document.getElementById("cheng99").innerHTML += "<div></div>";
            for(let j = 1; j <= i; j++) {
                document.getElementById("cheng99").getElementsByTagName("div")[i - 1].innerHTML +=
                    "<p>" + j + " x " + i + " = " + (j * i) + "</p>";
            }
        }

    }
</script>

</html>