实例
<!DOCTYPE html>
<html>
<head>
<title>JavaScript的tab切换</title>
<link rel="icon" type="images/x-icon" href="static/images/favicon.ico">
<style type="text/css">
button{
color: #fff;
background:#292727;
border: none;
}
div{
margin-top: 10px;
width: 500px;
height: 500px;
border: 1px solid #000;
background: rgba(106,106,98,0.5);
display: none;
}
</style>
</head>
<body>
<button onclick="oba_name(0)">按钮1</button>
<button onclick="oba_name(1)">按钮2</button>
<button onclick="oba_name(2)">按钮3</button>
<button onclick="oba_name(3)">按钮4</button>
<div style="display: block">显示按钮1效果</div>
<div>显示按钮2效果</div>
<div>显示按钮3效果</div>
<div>显示按钮4效果</div>
<script type="text/javascript">
function oba_name(num) {
var oba = document.getElementsByTagName("button");
var oba_a = document.getElementsByTagName("div");
for (var i=0; i<oba_a.length; i++)
{
oba_a[i].style.display="none";
}
oba_a[num].style.display="block";
oba_a[num].style.background="#F02424";
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
switch多分语句
实例
<script type="text/javascript">
var num=5;
switch(num){
case 1:document.write("当switch表达式（通常情况下是个变量）为1时输出你好");
break;//跳出当前循环
case 2:document.write("当switch表达式（通常情况下是个变量）为2时输出你不好");
break;
case 3:document.write("当switch表达式（通常情况下是个变量）为3时输出完美主义者");
break;
default:document.write("num值不在case中时输出的效果");
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
循环:for循环
格式为：for(初始值;循环条件;步长){
循环体;
}
实例
<script>
var i=1 //初始值
var num=0 //计算结果
for(i;i<=10;i++){
num++;//结果加1
document.write(num+"<br>");
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
乘法表
实例
<script>
for (var i=1; i<=9; i++) {
for (var j=i; j<=9; j++) {
var kong=" "
if (i*j<10) {
kong+=" "
}
document.write(i+"x"+j+"="+(i*j)+kong);
}
document.write("<br>")
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
while 循环
while(条件)
{
需要执行的代码
}
实例
<script>
var i=1;
var x="*";
while(i<20){
var j=1;
document.write("<center>");
while(j<=i){
document.write(x);
j++;
}
document.write("<br>");
i++
document.write("</center>")
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例