九九乘法表_编程笔记

九九乘法表

2022-10-30 21:54:28  浏览:1231  作者:保利尼奥
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" c...
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">

        <style>
            body{
                margin-right: 0px;
                padding: 0px;
                font-size: 0;
            }

            div{
                width: 120px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #fff;
                margin-right: 2px;
                margin-bottom: 2px;
                border-radius: 5px;
                background: lightcoral;
                font-size: 16px;
                display: inline-block;

            }

            .wrap{
                height: 100vh;
                overflow: hidden;
                background: #f5f5f5;
            }

            #box,#box2{
                width: 1157px;
                height: 460px;
                padding: 30px 0 0 30px;
                box-sizing: border-box;
                margin: 454px auto 0;
                position: relative;
            }

        </style>

    </head>
    <body>

        <section class="wrap">
            <section id="box">

            </section>
        </section>

       



        <script>
            var box = document.getElementById('box');

            var colors = ['#78cc64','#58ce7d','#4fcdad','#4cc7dd','#469ee8','#465de8','#5846e8','#8346e8','#9e46e8'];

            var str = '';

            for(var i=1;i<10;i++){
                for(var j=1;j<=i;j++){
                    // console.log(i, j);

                    var text = j + ' * ' + i + ' = ' + j * i;  // 计算里面的数据
                    str += '<div style="background:' + colors[i - 1] + '">' + text + '</div>';
                }

                str += '<br/>';
            }
           
            box.innerHTML = str;

        </script>

       
     
   
    </body>
</html>


评论区

共 0 条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

【随机内容】

返回顶部