乘法口诀HTML

最新推荐文章于 2023-10-13 14:26:10 发布

雪狐晨光

最新推荐文章于 2023-10-13 14:26:10 发布

阅读量3.4k

点赞数

分类专栏：日常工具学习文章标签：乘法口诀 html

本文链接：https://blog.csdn.net/zhangyifei521/article/details/122468040

版权

日常工具学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Html版本的乘法口诀代码

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

雪狐晨光

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
乘法口诀HTML

Html版本的乘法口诀代码<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>九九乘法表</title> <style> p { width: 100px; display: inline-block; padding:..
复制链接

扫一扫

专栏目录