照片查看
album.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>照片查看</title> <link rel="stylesheet" href="./css/master.css"> </head> <body> <div class="wrap"> <h2>照片查看</h2> <p> <label for="path">请输入图片地址：</label> <input type="text" name="path" id="path" value="./img/1.jpg"> </p> <p> 请输入图片类型： <input type="radio" name="type" value="0" checked="">直角 <input type="radio" name="type" value="21%">圆角 <input type="radio" name="type" value="50%">圆形 </p> <p> 图片是否添加阴影： <select class="" name="shadow"> <option value="0" selected="">不添加</option> <option value="1">添加</option> </select> </p> <button type="button" class="add">添加图片</button> <div class="main"> <ul></ul> </div> </div> </body> <script type="text/javascript" src="./js/jquery-3.3.1.js"></script> <script type="text/javascript" src="./js/master.js"></script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
/css/master.css
实例
.wrap {
width: 500px;
height: auto;
background-color: lightyellow;
margin-left: 30px;
padding: 20px;
border: 1px solid blue;
}
h2 {
text-align: center;
}
.add {
border: none;
background-color: lightskyblue;
width: 100px;
height: 30px;
color: white;
margin-bottom: 5px;
}
.add:hover {
background-color: orange;
font-size: 1.03em;
}
.main {
overflow: hidden;
}
.main ul {
margin: 0;
padding: 0;
}
.main ul li {
list-style-type: none;
float: left;
width: 220px;
height: 230px;
margin-left: 5px;
text-align: center;
}
.main ul li button {
border:none;
border-radius: 20%;
background-color: wheat;
margin: 5px;
}
.main ul li button:hover {
background-color: orange;
color: white;
cursor: pointer;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
/js/master.js
实例
//添加图片按钮事件
$('.add').on('click',function(){
//pic path
var path=$('#path').val()
// console.log(path)
//pic type
var type=$(':radio:checked').val()
//pic shadow
var shadow="none"
shadow=$(':selected').val()
if (shadow == 1) {
shadow="3px 3px 3px #666"
}
//创建图片元素
var img=$('<img>')
.prop('src',path)
.width(200)
.height(200)
.css({
'border-radius':type,
'box-shadow':shadow
})
var before=$('<button>').text('前移')
var after=$('<button>').text('后移')
var remove=$('<button>').text('删除')
var li=$('<li>').append(img,before,after,remove)
li.appendTo('ul')
//按钮点击事件
before.click(function(){
$(this).parent().prev().before($(this).parent())
})
after.click(function(){
$(this).parent().next().after($(this).parent())
})
remove.click(function(){
$(this).parent().remove()
})
})运行实例 »
点击 "运行实例" 按钮查看在线实例
Ajax实现登录
login.html
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body>
<fieldset>
<legend>用户登录</legend>
<p>
<label for="email">邮箱：</label>
<input type="email" name="email" value="" id="email">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" value="" id="password">
</p>
<p>
<button type="button" name="button">登录</button>
<span id="tips" style="font-size：1.1em;font-weight:bolder;color:red"></span>
</p>
</fieldset>
</body>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button:first').click(function(){
var url='php/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='php/index.php'
},2000)
} else {
$('#tips').text('登录失败，检查邮箱密码输入')
$('#email').focus()
setTimeout("$('#tips').empty()",2000)
}
}
var datetype='json'
$.post(url,data,success,datetype)
//禁用默认提交
return false
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
php/user.php
实例
<?php
if($_GET['m']=='login'){
if($_POST['email']=='admin' && $_POST['password']=='1234'){
echo '1';
} else {
echo '0';
}
}运行实例 »
点击 "运行实例" 按钮查看在线实例
php/index.php
