溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.端口案例改進，操作更靈活
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.model{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 350px;
margin-top: -200px;
margin-left: -250px;
background-color: aliceblue;
z-index: 10;
}
.model p,h3{
text-align: center;
}
.model p input[type="text"]{
width: 300px;
height: 28px;
}
.model p input[type="button"]{
width: 150px;
height: 35px;
}
.shadow{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
</style>
</head>
<body>
<a onclick="addModel();">添加</a>
<table border="1">
<thead>
<tr>
<th>地址</th>
<th>端口</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td name="host">1.1.1.11</td>
<td name="port">80</td>
<td><a class="edit">編輯</a>|<a>刪除</a></td>
</tr>
<tr>
<td name="host">1.1.1.12</td>
<td name="port">80</td>
<td><a class="edit">編輯</a>|<a>刪除</a></td>
</tr>
<tr>
<td name="host">1.1.1.13</td>
<td name="port">80</td>
<td><a class="edit">編輯</a>|<a>刪除</a></td>
</tr>
</tbody>
</table>
<div class="model hide">
<p><h3>操作</h3></p>
<p>地址：<input type="text" name="host"/></p>
<p>端口：<input type="text" name="port"/></p>
<p><input type="button" value="取消" onclick="removeModel();"/></p>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
//打開添加框
function addModel() {
$('.model,.shadow').removeClass('hide');
$('.model p input[type="text"]').val('');
}
//關閉添加框
function removeModel() {
$('.model,.shadow').addClass('hide');
}
//點擊編輯時執行函數
$('.edit').click(function () {
$('.model,.shadow').removeClass('hide');
//獲取當前點擊元素的父級標簽的所有兄弟標簽
var tds=$(this).parent().prevAll();
tds.each(function () {
// $('.model input[name="?"]')獲取name=？的輸入框
//$(this).attr('name')獲取被點擊td標簽的name值并帶入？
//val(）賦值
//$(this).text()h獲取被點擊td標簽的html文本
$('.model input[name='+$(this).attr('name')+']').val($(this).text());
})
})
</script>
</body>2.菜單切換內容
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
margin: 0 auto;
height: 35px;
line-height: 35px;
width: 400px;
background-color:#999999;
}
.menu .menu-item{
float: left;
width: 65px;
border-right: 1px solid #fdfdfd;
text-align: center;
color: #ffffff;
cursor: pointer;
}
.content{
margin: 0 auto;
height: 200px;
width: 398px;
border: 1px dashed #999999;
border-top: 0px;
}
.hide{
display: none;
}
.active{
background-color: #ff6600;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item active">菜單一</div>
<div class="menu-item">菜單二</div>
<div class="menu-item">菜單三</div>
</div>
<div class="content">
<div>內容一</div>
<div class="hide">內容二</div>
<div class="hide">內容三</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function () {
//被點擊div的樣式添加active，其他兄弟div樣式去掉div
$(this).addClass('active').siblings().removeClass('active');
//獲取被點擊div的index索引
var index=$(this).index('.menu-item');
//根據索引找到content內容孩子中的對應div并移除樣式hide，其他兄弟div添加h樣式ide
$('.content').children().eq(index).removeClass('hide').siblings().addClass('hide');
})
</script>
</body>3.點贊按鈕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
padding: 45px;
border-bottom:1px dashed #ff6600;
}
.item{
width: 35px;
position: relative;
}
</style>
</head>
<body>
<div class="content">
<div class="item">
<span>贊</span>
</div>
</div>
<div class="content">
<div class="item">
<span>贊</span>
</div>
</div>
<div class="content">
<div class="item">
<span>贊</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//當點擊.item時執行
$('.item').click(function () {
AddFavor(this);
})
//點贊函數
function AddFavor(self) {
var fontSize=15;
var top=0;
var right=0;
var opacity=1;
//創建+1標簽
var tag=document.createElement('span');
$(tag).text('+1');
$(tag).css('color','#ff6600');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize+'px');
$(tag).css('top',top+'px');
$(tag).css('right',right+'px');
$(tag).css('opacity',opacity);
$(self).append(tag);
//計時器每35mm執行一次
var obj=setInterval(function () {
fontSize+=5;
top-=5;
right-=5;
opacity-=0.1;
$(tag).css('fontSize',fontSize);
$(tag).css('top',top);
$(tag).css('right',right);
$(tag).css('opacity',opacity);
//當tag透明度小于零時，移除計數器并移除tag
if(opacity<0){
clearInterval(obj);
$(tag).remove();
}
},35)
}
</script>
</body>
</html>4.登陸驗證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.error{
color:red;
}
</style>
<body>
<form id="f1" action="https://www.baidu.com/" method="post">
<p>用戶:<input type="text" name="user" msg="用戶名" /></p>
<p>密碼:<input type="password" name="password" msg="密碼" /></p>
<P>郵箱:<input type="text" name="email" msg="郵箱" /></P>
<p>電話:<input type="text" name="tel" msg="電話" /></p>
<input type="submit" value="提交">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
//當頁面框架加載完成后執行
$(function () {
$(':submit').click(function () {
$('.error').remove()
var flag=true;
//遍歷input
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v=$(this).val();
var n=$(this).attr('msg');
//如果為空
if(v.length<=0){
flag=false;
var tag=document.createElement('span')
tag.className="error";
tag.innerHTML=n+"為必填";
$(this).after(tag);
//return false;
}
})
return flag;
})
})
</script>
</body>
</html>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
