求用js写的九九乘法表

JavaScript014

求用js写的九九乘法表,第1张

1、使用js的for循环输出页面

<script language=javascript>

//使用表格来写，先定义表格       

      var table = document.createElement("table")       

      document.body.appendChild(table)       

      //使用border-collapse来合并单元格边框。       

      table.style.borderCollapse="collapse"

      

      //开始循环编写公式

for(var i=1 i<=9 i++) {           

          //声明行。           

          var tr = document.createElement("tr")           

          table.appendChild(tr)           

          for(var j =1 j <=i j++) {               

          //声明列。               

          var td = document.createElement("td")               

          tr.appendChild(td)               

           //编写口诀公式               

          var s =j+'×'+i+'='+i*j               

          //将公式输进单元格内。               

          td.innerHTML =s               

          //下面定义单元格的样式。               

          td.style.height = "30px"               

          td.style.width = "80px"               

          td.style.margin = "0"               

          td.style.padding = "5px 10px"               

          td.style.textAlign = "center"               

          td.style.border = "1px solid gray"                   

          }       

      }

</script>

控制台？效果如下：

js代码如下：

<script type="text/javascript">

console.log("九九乘法表")

    

for ( var x = 1 x <= 9 x++) {

    str=""

    for ( var y = 1 y <= x y++) {

str+=x + "*" + y + " = " + (x * y)+"  "

    }

    console.log(str)

}

</script>

<script type="text/javascript">

function G(e){return document.getElementById(e)}

</script>

单价：<input type="text" id="p" name="price" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')" />

数量：<input type="text" id="c" name="count" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')G('total').value=G('c').value*G('p').value" />

金额：<input type="text" id="total" name="total" />

注意：input元素 以及HTML 任何元素的 ID 都是唯一的，也就是说 你还想增加行这样的效果

那么请在 id 和 name 属性中 后面加不同的后缀来保证ID 和 name 的唯一性，另外还要改动 一点JS

下面是两条的情况 ，你注意看规律，自己看明白：

<script type="text/javascript">

function G(e){return document.getElementById(e)}

</script>

单价：<input type="text" id="p" name="price" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')" />

数量：<input type="text" id="c" name="count" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')G('total').value=G('c').value*G('p').value" />

金额：<input type="text" id="total" name="total" /><br>

单价：<input type="text" id="p1" name="price1" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')" />

数量：<input type="text" id="c1" name="count1" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')G('total1').value=G('c1').value*G('p1').value" />

金额：<input type="text" id="total1" name="total1" />