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" />