Web服务端实验（第三章）

c323u2bdf

于 2022-10-13 17:01:15 发布

阅读量2.5k

点赞数 6

分类专栏： HTML 文章标签：前端 javascript java

本文链接：https://blog.csdn.net/qq_60212533/article/details/127303235

版权

HTML 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

1、用document对象在屏幕上打印100个“欢迎”。

代码：

<!--作业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>

设计效果：

2、用表单输入10本图书的价格，然后显示这10本书中最高价格、最低价格和评价价格。

代码：

<!--作业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>

设计效果：

3、用<img>标签在网页中显示一幅图片，再用计时器SetTimeout或Setinterval自动切换成其他图片内容，形成图片的轮播效果。

代码：

<!--服务端第二次作业第三小题-->
<!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>

设计效果：

图片轮播