博客列表 >0409作业

0409作业

郭恒的博客
郭恒的博客原创
2018年04月10日 17:19:10472浏览

IMG_20180410_171219.jpgIMG_20180410_171231.jpg

实例

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="js/demo.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="wrap">
            <div class="header">             
                <h2>在线相册管理器</h2>    
                <p>
                    <label for="img_url">图片地址:</label>
                    <input type="text" name="img_url" id="img_url" placeholder="images/demo.jpg"></td>
                </p>
                <p>图片类型:
                    <input type="radio" id="rect" name="border" value="0" checked><label for="rect">直角</label>
                    <input type="radio" id="radius" name="border" value="10%"><label for="radius">圆角</label>
                    <input type="radio" id="circle" name="border" value="50%"><label for="circle">圆型</label>
                </p>
                <p>是否添加阴影:
                    <select name="shadow">
                        <option value="0" selected>不添加</option>
                        <option value="1">添加</option>
                    </select>
                </p>
                <p><button class="add">添加图片</button></p>
            </div>
            <div class="main">
                <ul></ul>
            </div>
        </div>
    </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <form action="api/check.php" method="post">
                <fieldset>
                    <legend>用户登录</legend>
                    <p>
                        <label for="email">邮箱:</label>
                        <input type="email" name="email" id="email">
                    </p>
                    <p>
                        <label for="password">密码:</label>
                        <input type="password" name="password" id="password">
                    </p>
                    <p>
                        <button>登录</button>
                        <span id="tips" style="font-size:1.2em;font-weight: bolder;color:red"></span>
                    </p>
                </fieldset>
            </form>
        </div>
    </body>
    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script>
        $('button:first').click(function () {
            var url = 'api/user.php?m=login'
            var data = {
                "email": $('#email').val(),
                "password": $('#password').val()
            }
            var success = function (res) {
                if (res == '1') {
                    $('#tips').text('登录成功,正在跳转中...')
                    setTimeout(function () {
                        location.href = 'api/index.php'
                    }, 5000)
                } else {
                    $('#tips').text('邮箱或密码错误,请重新输入')
                    $('#email').focus()
                    setTimeout("$('#tips').empty()", 2000)
                }
            }
            var dataType = 'json'
            $.post(url, data, success, dataType)
            return false
        })
    </script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议