1、用document對象在屏幕上打印100個“歡迎”。
代碼：
<!--作業(yè)1-->
<html>
<head>
<meta charset="UTF-8">
<script language="JavaScript">
function factor(num){
var i;
for(i=0;i<num;i++)
document.write("歡迎\n");
}
</script>
</head>
<body>
<script>
factor(100);
</script>
</body>
</html>設(shè)計效果：
?
2、用表單輸入10本圖書的價格，然后顯示這10本書中最高價格、最低價格和評價價格。
代碼：
<!--作業(yè)2-->
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function fun(){
var p=0,min=10000,max=0;
var x=document.getElementsByName("book");
var tmp=0.0;
for(var i=0;i<x.length;i++){
if(x[i].value==""){
tmp=0.0;
alert("請輸入全部10本書的價格");
p=0;
max=0;
min=0;
break;
}else{
tmp=parseFloat(x[i].value);
}
p=p+tmp;
if(max<tmp){max=tmp;}
if(min>tmp){min=tmp;}
}
document.getElementById("max").value=max;
document.getElementById("min").value=min;
document.getElementById("p").value=p/x.length;
return;
}
</script>
</head>
<body>
<p>請輸入全部10本書的價格</p>
<form>
book1<input type="text" name="book" value=""><br>
book2<input type="text" name="book" value=""><br>
book3<input type="text"name="book" value=""><br>
book4<input type="text" name="book" value=""><br>
book5<input type="text" name="book" value=""><br>
book6<input type="text" name="book" value=""><br>
book7<input type="text" name="book" value=""><br>
book8<input type="text" name="book" value=""><br>
book9<input type="text" name="book" value=""><br>
book10<input type="text" name="book" value=""><br>
<input type="button" onclick="fun()" value="提交"><br>
最高價格<input type="text" id="max" readonly><br>
最低價格<input type="text" id="min" readonly><br>
平均價格<input type="text" id="p" readonly><br>
</form>
</body>
</html>設(shè)計效果：
?
?
3、用<img>標(biāo)簽在網(wǎng)頁中顯示一幅圖片，再用計時器SetTimeout或Setinterval自動切換成其他圖片內(nèi)容，形成圖片的輪播效果。
代碼：
<!--服務(wù)端第二次作業(yè)第三小題-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charest="UTF-8">
<title>圖片輪播</title>
</head>
<body>
<script type="text/javascript">
var count=1;
window.onload=function(){
setInterval(show,1000);
}
function show(){
if(count>3)
{
count=1;
}else
count++;
var dom=document.getElementById("apple");
dom.src="../image/"+count+".jpg";
}
</script>
<img src="../image/1.jpg" width="400px" height="400px" id="apple">
</body>
</html>設(shè)計效果：文章來源：http://www.zghlxwxcb.cn/news/detail-726192.html
圖片輪播文章來源地址http://www.zghlxwxcb.cn/news/detail-726192.html
到了這里，關(guān)于Web服務(wù)端實驗（第三章）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
