Python全栈最全学习之路-WEB前端练习（三）

最新推荐文章于 2020-11-28 15:11:42 发布

Fresh_anyu

最新推荐文章于 2020-11-28 15:11:42 发布

阅读量220

点赞数

分类专栏： python全栈学习文章标签： jquery

本文链接：https://blog.csdn.net/Sdhrs_nn/article/details/108824990

版权

python全栈学习专栏收录该内容

36 篇文章 12 订阅

订阅专栏

练习（三）

一、JQ练习

在这里插入图片描述
要求：
1、鼠标在照片外的时候，四张照片自动轮播，并隐藏左右箭头
2、鼠标在照片上时，停止轮播，左右箭头并显示出来，点击左右箭头会轮换照片，点击小圆点也会换照片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ作业</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .box{
            width: 320px;
            height: 400px;
            border: 1px solid grey;
            margin: 100px auto;
            position: relative;
        }
        .box .pic{
            position: absolute;
            top: 0;
            left: 0;
        }
        .box .pic img{
            width: 320px;
            height: 400px;
            /*position: absolute;*/
        }
        .box .pic li{
            position: absolute;
            left: 0;
            top: 0;
        }
        /*.box .pic li{
            display: none;
        }
        .box .pic li.show{
            display: block;
        }*/
        .box .arrows{
            height: 400px;
        }
        .box .arrows li{
            width: 20px;
            height: 20px;
            position: absolute;
            background: grey;
            text-align: center;
            line-height: 20px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .box .arrows li:hover{
            background: white;
        }
        .box .arrows li.left{
            left: 0;
        }
        .box .arrows li.right{
            right: 0;
        }
        .box .dot{
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
        }
        .box .dot li{
            width: 10px;
            height: 10px;
            border: 1px solid grey;
            border-radius: 50%;
            background: grey;
            float: left;
            margin: 3px;
            cursor: pointer;
        }
        .box .dot li:hover{
            border: 1px solid grey;
            background: white;
        }
        .box .dot li.on{
            border: 1px solid grey;
            background: white;
        }
    </style>
</head>
<body>
<div class="box">
    <ul class="pic">
        <li><img src="images/hu1.jpg" alt="图片加载错误"></li>
        <li><img src="images/hu2.jpg" alt="图片加载错误"></li>
        <li><img src="images/hu3.jpg" alt="图片加载错误"></li>
        <li><img src="images/hu4.jpg" alt="图片加载错误"></li>
    </ul>
    <ul class="arrows">
        <li class="left">&lt;</li>
        <li class="right">&gt;</li>
    </ul>
    <ul class="dot">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script src="JQ/JQ11.js"></script>
<script>
    // 获取元素
    var $pic = $(".box .pic li");  // 图片
    var $arrows = $(".box .arrows li");  // 左右箭头
    var $dot = $(".box .dot li");  // 小圆圈

    var first = 0;  // 初始下标值，通过下标确定图片
    var len = $pic.length;  // 获取图片的总数
    var timer;  // 设置定时器的名称

    // 初始化
    $arrows.hide();  //  左右箭头隐藏
    $pic.hide().eq(0).show();
    $dot.removeAttr("class").eq(0).addClass("on");

    // 变换函数、
    function change(i) {
        $pic.eq(first).fadeOut(1000);  //  将上一张图片淡出页面
        $dot.eq(first).removeClass("on");  //  同时将上一个小圆圈去掉
        first = i;
        $pic.eq(first).fadeIn(1000);  //  将下一张图片淡入页面
        $dot.eq(first).addClass("on")
    }

    //  自动轮播的函数
    function auto(){
        timer = setInterval(function(){
            var num = first;
            num++;
            if(num>(len-1)){
                num = 0;
            }
            change(num);
        },2000)
    }
    auto();

    //  小圆圈的点击事件
    $dot.click(function(){
        var num = $(this).index();
        //  如果当前点击的小圆圈的小标不是当前所轮播的，那就改变图片
        if(num != first){
            change(num);
        }
    });

    //  左右箭头的点击事件
    $arrows.click(function(){
        var num = first;
        //  获取左右箭头的下标，下标值为0或者1
        //  如果为1，则为true，右边的箭头往后轮播
        if($(this).index()){
            // 轮播后面一张图片
            num += 1;
            if(num>(len-1)){
                num = 0;
            }
        }else{  // 如果为0，则为false，左边的箭头往前轮播
            num -= 1;
            if(num < 0){
                num = len -1;
            }
        }
        change(num);
    });

    //  划入左右箭头显示，停止轮播
    //  划出左右箭头隐藏，继续轮播
    $(".box").hover(function(){
        $arrows.show();
        clearInterval(timer);
    },function(){
        $arrows.hide();
        auto();
    });
</script>
</body>
</html>

在这里插入图片描述 总结：
1、图片位置、左右箭头、小圆点
2、初始状态
3、如何进行轮播
4、划出与划入状态
5、箭头、小圆点和照片如何一一对应

二、Ajax练习

在这里插入图片描述
要求：
1、建好此页面
2、使用传统表单方法，填好信息后在后台输出填写的信息
3、使用Ajax方法，填好信息后在后天输出填写的信息
方法一：

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax作业-form传统形式</title>
</head>
<body>
<form action="/" method="post">
    <!--文本框-->
    用户名：<input type="text" placeholder="请输入用户名" name="user"><br>
    <!--密码框-->
    密&emsp;码：<input type="password" placeholder="请输入密码" name="pwd"><br>
    <!--单选框-->
    性&emsp;别：<input type="radio" value="male" name="sex" id="male" checked>
                <label for="male">男</label>
                <input type="radio" value="male" name="sex" id="female" checked>
                <label for="female">女</label>
                <input type="radio" value="male" name="sex" id="no" checked>
                <label for="no">保密</label>
    <br>
    <!--多选框-->
    爱&emsp;好：<input type="checkbox" value="play" name="hobby" id="play">
                <label for="play">打游戏</label>
                <input type="checkbox" value="study" name="hobby" id="study">学习
                <input type="checkbox" value="basketball" name="hobby" id="basketball">打球
    <br>
    <!--文件-->
    上传头像：<input type="file" accept="image/*" name="file"><br>
    <!--下拉框-->
    地&emsp;址：<select name="address" id="address" size="1">
                    <!--分组-->
                    <optgroup label="中国">
                        <option value="SX" selected>陕西</option>
                        <option value="BJ">北京</option>
                        <option value="GZ">广州</option>
                        <option value="HN">湖南</option>
                    </optgroup>
                </select>
    <br>
    <!--文本域-->
    个人简介：<textarea name="introduce" id="introduce" cols="30" rows="10"></textarea>
    <br>
    <!--按钮-->
    <input type="submit" value="登录">
    <input type="reset" value="取消">
</form>
</body>
</html>

	后台代码如下：

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        # self.write("Hello, world")
        self.render("Task3_2.html")
    def post(self,*args,**kwargs):
        print(self.get_argument("user"))
        print(self.get_argument("pwd"))
        print(self.get_argument("sex"))
        print(self.get_arguments("hobby"))
        print(self.get_argument("file"))
        print(self.get_argument("address"))
        print(self.get_argument("introduce"))
if __name__ == "__main__":
    application = tornado.web.Application([
        (r"/", MainHandler),
    ])
    application.listen(8888)
    tornado.ioloop.IOLoop.current().start()

在这里插入图片描述
方法二：

	HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax作业</title>
</head>
<body>
<form action="/" method="post">
    <!--文本框-->
    用户名：<input type="text" placeholder="请输入用户名" name="user"><br>
    <!--密码框-->
    密&emsp;码：<input type="password" placeholder="请输入密码" name="pwd"><br>
    <!--单选框-->
    性&emsp;别：<input type="radio" value="male" name="sex" id="male" checked>
                <label for="male">男</label>
                <input type="radio" value="male" name="sex" id="female" checked>
                <label for="female">女</label>
                <input type="radio" value="male" name="sex" id="no" checked>
                <label for="no">保密</label>
    <br>
    <!--多选框-->
    爱&emsp;好：<input type="checkbox" value="play" name="hobby" id="play">
                <label for="play">打游戏</label>
                <input type="checkbox" value="study" name="hobby" id="study">学习
                <input type="checkbox" value="basketball" name="hobby" id="basketball">打球
    <br>
    <!--文件-->
    上传头像：<input type="file" accept="image/*" name="file"><br>
    <!--下拉框-->
    地&emsp;址：<select name="address" id="address" size="1">
                    <!--分组-->
                    <optgroup label="中国">
                        <option value="SX" selected>陕西</option>
                        <option value="BJ">北京</option>
                        <option value="GZ">广州</option>
                        <option value="HN">湖南</option>
                    </optgroup>
                </select>
    <br>
    <!--文本域-->
    个人简介：<textarea name="introduce" id="introduce" cols="30" rows="10"></textarea>
    <br>
    <!--按钮-->
    <input type="button" value="登录" id="btn">
    <input type="button" value="取消">
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
    var $btn = $("#btn");
    $btn.click(function(){
         // 获取值
        var $user = $("input[name='user']").val();
        var $pwd = $("input[name='pwd']").val();
        var $sex = $("input[name='sex']:checked").val();
        var $hobbies = $("input[name='hobby']:checked").map(function(){
            return $(this).val();
        }).get().join(",");
        var $file = $("input[name='file']").val();
        var $add = $("select").val();
        var $intro = $("textarea").val();
        // 通过Ajax把数据传到后台
        $.ajax({
            "type": "post",
            "url": "/",
            "data": {
                "user": $user,
                "pwd": $pwd,
                "sex": $sex,
                "hobbies": $hobbies,
                "file": $file,
                "add": $add,
                "intro": $intro
            },
            "success": function(){
                document.write("提交成功!");
            }
        })
    });
</script>
</body>
</html>

	后台代码如下：

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        # self.write("Hello, world")
        self.render("Task_JQ3_2.html")
    def post(self,*args,**kwargs):
        print(self.get_argument("user"))
        print(self.get_argument("pwd"))
        print(self.get_argument("sex"))
        print(self.get_arguments("hobbies"))
        print(self.get_argument("file"))
        print(self.get_argument("add"))
        print(self.get_argument("intro"))
if __name__ == "__main__":
    application = tornado.web.Application([
        (r"/", MainHandler),
    ])
    application.listen(8888)
    tornado.ioloop.IOLoop.current().start()