<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: auto; padding: 0px; } #aa{ width: 1000px; height: 310px; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 10px; } #a1{ width: 1000px; height: 100px; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 40px; } #a11{ width: 200px; height: 40px; float: left; margin-top: 30px; margin-left: 20px; } #a111{ width: 180px; height: 30px; margin-top: 5px; margin-left: 10px; border-radius: 10px,20%; } #a12{ width: 100px; height: 40px; float: left; margin-top: 30px; } #a112{ width: 50px; height: 30px; margin-top: 5px; } #a2{ width: 1000px; height: 100px; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 20px; } #a21{ width: 200px; height: 40px; float: left; margin-top: 30px; margin-left: 20px; text-align: center; line-height: 40px; } #a22{ width: 400px; height: 100px; float: left; text-align: center; line-height: 40px; } #bb{ width: 1000px; height: 310px; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 10px; } #b1{ width: 1000px; height: 80px; background-color: white; box-shadow: 8px 8px 8px gray; line-height: 80px; } #b2{ width: 1000px; height: 100px; background-color: white; box-shadow: 8px 8px 8px gray; line-height: 80px; margin-top: 10px; } #b21{ width: 200px; height: 40px; float: left; margin-top: 30px; margin-left: 20px; } #b211{ width: 180px; height: 30px; margin-top: 5px; margin-left: 10px; border-radius: 10px,20%; } #b22{ width: 40px; height: 40px; text-align: center; line-height: 40px; float: left; margin-top: 30px; } #b231{ width: 180px; height: 30px; margin-top: 5px; margin-left: 10px; border-radius: 10px,20%; } #b224{ width: 100px; height: 40px; float: left; margin-top: 30px; } #b241{ width: 50px; height: 40px; margin-top: 5px; } #b23{ width: 200px; height: 40px; float: left; margin-top: 30px; margin-left: 20px; } #b24{ width: 100px; height: 40px; float: left; margin-top: 30px; margin-left: 20px; } #b3{ width: 1000px; height: 100px; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 10px; } #b31{ width: 200px; height: 40px; float: left; margin-top: 30px; margin-left: 20px; text-align: center; line-height: 40px; } #b32{ width: 400px; height: 100px; float: left; text-align: center; line-height: 40px; } #cc{ width: 1000px; height: 310px; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 10px; } #c{ width: 1000px; height: 100px; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 20px; } #c1{ width: 1000px; height: 150px; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 20px; } #c11{ width: 1000px; height: 70px; } #c111{ width: 150px; height: 70px; float: left; margin-left: 20px; } #c112{ width: 150px; height: 70px; float: left; margin-left: 10px; } #c113{ width: 150px; height: 70px; float: left; margin-left: 10px; } #c114{ width: 150px; height: 70px; float: left; margin-left: 10px; } #c115{ width: 150px; height: 70px; float: left; margin-left: 10px; } #c12{ width: 1000px; height: 78px; text-align: center; line-height: 78px; } #c121{ width: 100px; height: 78px; float: left; margin-left: 20px; } #c122{ width: 100px; height: 78px; float: left; margin-left: 10px; } #c123{ width: 100px; height: 78px; float: left; margin-left: 10px; } #c124{ width: 100px; height: 78px; float: left; margin-left: 10px; } #c125{ width: 200px; height: 78px; float: left; margin-left: 10px; } #c1211{ width: 60px; height: 30px; } #c1212{ width: 60px; height: 30px; } #c1213{ width: 60px; height: 30px; } #c1214{ width: 60px; height: 30px; } #c1215{ width: 100px; height: 30px; background-color: blue; } #c2{ width: 1000px; height: 100px; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 20px; } #c21{ width: 200px; height: 40px; float: left; margin-top: 30px; margin-left: 20px; text-align: center; line-height: 40px; } #c22{ width: 400px; height: 100px; float: left; text-align: center; line-height: 100px; } </style> </head> <body> <div id="aa"> 1、innerHTML 的基本用法 <div id="a1"> <div id="a11"> <input type="" name="a111" id="a111" value="" /> </div> <div id="a12"> <input type="submit" name="a112" id="a112" value="提交" onclick="b1()"/> </div> </div> <div id="a2"> <div id="a21"> 提交后在这里显示： </div> <div id="a22"> </div> </div> </div> <div id="bb"> <div id="b1"> 2、innerhtml、字符串、判断的基本应用 </div> <div id="b2"> <div id="b21"> <input type="" name="b211" id="b211" value="" /> </div> <div id="b22"> + </div> <div id="b23"> <input type="" name="b231" id="b231" value="" /> </div> <div id="b24"> <input type="submit" name="b241" id="b241" value="提交" onclick="b2()"/> </div> </div> <div id="b3"> <div id="b31"> 提交后在这里显示： </div> <div id="b32"> </div> </div> </div> <div id="cc"> 3、数组输出练习 <div id="c1"> <div id="c11"> <div id="c111"> 已知数组内容： </div> <div id="c112"> 1、这是第一句话 </div> <div id="c113"> 2、这是第二句话 </div> <div id="c114"> 3、这是第三句话 </div> <div id="c115"> 4、这是第四句话 </div> </div> <div id="c12"> <div id="c121"> <input type="submit" name="c1211" id="c1211" value="提取1" onclick="b3()"/> </div> <div id="c122"> <input type="submit" name="c1212" id="c1212" value="提取2" onclick="b4()"/> </div> <div id="c123"> <input type="submit" name="c1213" id="c1213" value="提取3" onclick="b5()"/> </div> <div id="c124"> <input type="submit" name="c1214" id="c1214" value="提取4" onclick="b6()"/> </div> <div id="c125"> <input type="submit" name="c1215" id="c1215" value="全部弹出提取" onclick="b7()"/> </div> </div> </div> <div id="c2"> <div id="c21"> 提交后在这里显示： </div> <div id="c22"> </div> </div> </div> </body> </html> <script type="text/javascript"> function b1(){ var a112 = document.getElementById("a111").value; a22.innerHTML = a112 } function b2(){ var b241= document.getElementById("b211").value+document.getElementById("b231").value; b32.innerHTML = b241 } function b3(){ var a1211 = document.getElementById("c112").innerHTML; c22.innerHTML = a1211 } function b4(){ var a1212 = document.getElementById("c113").innerHTML; c22.innerHTML = a1212 } function b5(){ var a1213 = document.getElementById("c114").innerHTML; c22.innerHTML = a1213 } function b6(){ var a1214 = document.getElementById("c115").innerHTML; c22.innerHTML = a1214 } function b7(){ var a1215 = document.getElementById("c112").innerHTML; alert(a1215) var a1216 = document.getElementById("c113").innerHTML; alert(a1216) var a1217 = document.getElementById("c114").innerHTML; alert(a1217) var a1218 = document.getElementById("c115").innerHTML; alert(a1218) } </script>