一个人看的www视频免费,bt天堂在线www

首頁 > 博客列表 > 在線相冊管理系統(tǒng)與$.post()操作登陸驗(yàn)證——2018年4月10日

博主信息

博文 59

粉絲 0

評(píng)論 1

訪問量 57422

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>在線動(dòng)態(tài)相冊管理系統(tǒng)</title>
	<link rel="stylesheet" href="../0409/CSS/style.css">
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript" src="../0409/js/jq.js"></script>
</head>
<body>
	<div class="box">
		<h2>在線相冊管理系統(tǒng)</h2>
		<p>
		<label for="img_url"><span>請插入圖片地址：</span></label>	 
		<input type="text" value="" id="img_url" class="img_url"  placeholder="images/fbb.jpg">
		</p>
		<p>
		<span>請選擇圖片類型：</span>
		<input type="radio" value="0" name="bian" id="zhijiao" checked><label for="zhijiao" >直角</label> 
		<input type="radio" value="15%" name="bian" id="yuanxing"><label for="yuanxing">圓型</label> 
		<input type="radio" value="50%" name="bian" id="yuanjiao"><label for="yuanjiao">圓角</label>
		</p>
		<p>
			<span>圖片是否添加陰影：</span>
			<select name="shadow" >
				<option value="1" selected>不添加</option>
				<option value="2">添加</option>
			</select>
		</p>
		<button class="annu">添加圖片</button>

		<div class="xiangceku">
		<ul> </ul>
		</div>
	</div>
	
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

CSS代碼：

實(shí)例

.box{
	width: 360px;
	height: auto;
	border: 1px solid #cecece;
	padding: 10px;
	margin: auto;
	background-color: lightyellow;
}

.box h2{
	text-align: center;
}
.box>button.annu{
	border: none;
	padding: 10px 30px;
	color: #fff;
	cursor: pointer;
	background-color: lightblue;
	margin-bottom: 20px;
}
.box>button.annu:hover{
	border: none;
	background-color: coral;
}
.xiangceku{
		overflow: hidden;
}
.xiangceku ul{
	padding: 0;
	margin: 0;
}
.box .xiangceku ul li{
	list-style: none;
	float: left;
	margin-left: 20px;
	margin-bottom: 10px;
	width: 150px;
	height: 200px;
	cursor: pointer;
}
.box .xiangceku ul li button{
	margin: 3px;
	padding: 3px 8px;
	text-align: center;
	border: none;
	cursor: pointer;
	background-color: green;
	color: #fff;
	border-radius: 10px;
}
.box .xiangceku ul li button:hover{
	background-color: coral;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

JQuery代碼：

實(shí)例

$(document).ready(function(){

	$('button.annu').on('click',function(){

		var img_url = $('#img_url').val()

		if(img_url.length == 0){
			alert('請輸入要添加的圖片地址')
			$('#img_url').focus()
			return false
		}

		// 獲取圖片的類型
		var zhijiao = $(':radio:checked').val()
		console.log(zhijiao)
		//給圖片添加陰影
		var shadow = 'none'

		if($(':selected').val() == 2){

			shadow = '3px 3px 3px #666'
		}

		// 創(chuàng)建圖片元素
		var img = $('<img>')
			.prop('src',img_url)
			.width(150)
			.height(150)
			.css({
				'border-radius':zhijiao,
				'box-shadow':shadow
				})


			//給圖片增加三個(gè)按鈕：前移，后移，刪除
			var qianyi = $('<button>').text('前移')
			var houyi = $('<button>').text('后移')
			var shanchu = $('<button>').text('刪除')

			// 聲明變量，創(chuàng)建LI元素標(biāo)簽，把以上三個(gè)按鈕放在圖片的后面顯示
			var li = $('<li>').append(img,qianyi,houyi,shanchu)

			// 將創(chuàng)建的LI標(biāo)簽插入到UL元素中
			li.appendTo('ul')


			//前移按鈕，在前一個(gè)圖片做為插入點(diǎn)，插入當(dāng)前圖片
			qianyi.click(function(){
				$(this).parent().prev().before($(this).parent())
			});

			// 后移按鈕,在后一個(gè)圖片做為插入點(diǎn)，插入當(dāng)前圖片
			houyi.click(function(){
				$(this).parent().next().after($(this).parent())
			});

			//刪除按鈕
			shanchu.click(function() {
				$(this).parent().remove()
			});


	})
})

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

運(yùn)行后效果圖：

用戶登錄 $post實(shí)現(xiàn)驗(yàn)證

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4.Ajax_POST</title>
</head>
<body>
	<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>
</body>
</html>
<!-- <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

		$('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('登錄成功，正在跳轉(zhuǎn)中...')
					setTimeout(function(){
						lacation.href = 'api/index.php'
					},2000)
				} else {
					$('#tips').text('郵箱或密碼錯(cuò)誤，請重新輸入...')
					$('#email').focus()
					setTimeout("$('#tips').empty()",2000)
				}
			}

			var dataType = 'json'

			$.post(url,data,success,dataType)

			return false
		})

</script>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

執(zhí)行后效果圖：