Web服务端实验（第三章）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Web服务端实验（第三章）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

设计效果：

用服务器端脚本在屏幕上打印一百个欢迎,然后用客户端脚本在屏幕上打一百个欢迎,HTML,前端,javascript,java

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>

设计效果：

用服务器端脚本在屏幕上打印一百个欢迎,然后用客户端脚本在屏幕上打一百个欢迎,HTML,前端,javascript,java

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>

设计效果：

图片轮播文章来源地址https://www.toymoban.com/news/detail-726192.html

到了这里，关于Web服务端实验（第三章）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！