打字机
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 600px;
height: 100px;
margin: 0 auto;
border: 1px solid gray;
font-size: 16px;
color: green;
text-indent: 2em;
padding: 2px;
}
</style>
</head>
<body>
<div id="info"></div>
<script src="jquery.min.js"></script>
<script>
var Text = "武汉, 简称“ 汉”, 别称“ 江城”, 是湖北省省会、 中部六省唯一的副省级市和特大城市,中国中部地区的中心城市, 长江经济带核心城市, 全国重要的工业基地、 科教基地和综合交通枢纽,中央军委联勤保障部队驻地"
var timeId = setInterval(add, 200);
var index = 0;
var s = '';
function add() {
s = Text.substring(0, index)
index++;
$('#info').html(s);
if(index == Text.length) {
clearInterval(timeId);
}
}
</script>
</body>
</html>
选项卡特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡特效</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.main {
width: 400px;
margin: 1px auto;
}
.tab {
height: 38px;
width: 320px;
border: 1px solid #ccc;
margin-bottom: -1px;
}
.tab>.active {
border-top-color: red;
background-color:darkkhaki;
}
.tab>li {
border-top: 4px solid #fff;
float: left;
height: 32px;
line-height: 32px;
}
.tab>li>a {
display: inline-block;
width: 80px;
height: 32px;
text-align: center;
color: #000;
}
.card {
width: 322px;
height: 100px;
border: 1px solid #ccc;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.card>div {
display: none;
}
.card>.show {
display: block;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="main">
<ul class="tab" id="tab">
<li class="active">
<a href="javascript:;">春运</a>
</li>
<li>
<a href="javascript:;">专栏</a>
</li>
<li>
<a href="javascript:;">热点</a>
</li>
<li>
<a href="javascript:;">看湖北</a>
</li>
</ul>
<div class="card">
<div class="show">
<p style="color:blue;font-size: 14px;">
<span>香港高铁春运首秀一票难求</span><br>
<span>加长版”复兴号“,助力春运<span><br>
<span>春运意味着拥挤,也意味着幸福<span><br>
</p>
</div>
<div>
<ul>
<li>吴昕"宅懒养生"人设是双刃剑?</li>
<li>联赛欧冠利物浦只能2选1</li>
<li>三安光电:一个虚弱的胖子</li>
<li>匿名社交兴亡史</li>
</ul>
</div>
<div>
<p style="color:black;font-size: 14px;">
<span>吴秀波资本版图曝光</span><br>
<span>故宫数字沉浸体验展将开放<span><br>
<span>哈登37分火箭惨败76人<span><br>
<span>54岁巩俐尽显女王范<span>
</p>
</div>
<div>
<p style="color:deepskyblue;font-size: 14px;">
<span>武汉通年内可刷遍全国公交地铁</span><br>
<span> 武汉将建4条市域铁路<span><br>
<span>湖北省委副秘书长杨邦国接受纪律审查和监察调查<span><br>
<span>湖北省十大事故多发路段公布<span>
</p>
</div>
</div>
</div>
<script>
$("#tab>li").mouseenter(function(){
$(this).addClass("active").siblings().removeClass("active");
var index=$(this).index();
$(".card>div").eq(index).addClass("show").siblings().removeClass("show");
})
</script>
</body>
</html>
表单操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tr>td {
text-align: center;
}
.selStyle{
background-color: blue;
color: #FFFFFF;
}
</style>
</head>
<body>
<table border="1" cellpadding="8" cellspacing="0" width="50%">
<caption>用户列表</caption>
<tr style="background-color: greenyellow;">
<th><input type="checkbox" name="all" id="all"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电子邮箱</th>
</tr>
<tr>
<td><input type="checkbox" name="uids" value="101" /></td>
<td>101</td>
<td>刘小风</td>
<td>男</td>
<td>23</td>
<td>[email protected]</td>
</tr>
<tr>
<td><input type="checkbox" name="uids" value="102" /></td>
<td>102</td>
<td>聂海华</td>
<td>男</td>
<td>24</td>
<td>[email protected]</td>
</tr>
<tr>
<td><input type="checkbox" name="uids" value="103" /></td>
<td>103</td>
<td>胡一笑</td>
<td>女</td>
<td>25</td>
<td>[email protected]</td>
</tr>
<tr>
<td><input type="checkbox" name="uids" value="104" /></td>
<td>104</td>
<td>刘梦龙</td>
<td>男</td>
<td>27</td>
<td>[email protected]</td>
</tr>
<tr>
<td><input type="checkbox" name="uids" value="105" /></td>
<td>105</td>
<td>朱韵华</td>
<td>女</td>
<td>23</td>
<td>[email protected]</td>
</tr>
</table>
<input type="button" id="btnDelete" value="删除选中的行" />
<script src="jquery.min.js"></script>
<script>
$("table tr:gt(0)").hover(function(){
$(this).addClass("selStyle").siblings().removeClass("selStyle");
},function(){
$(this).removeClass("selStyle");
}
)
$("#all").change(function(){
var flag = $(this).prop("checked");
$("table input:checkbox:gt(0)").prop("checked",flag);
})
$("table input:checkbox:gt(0)").change(function(){
var temp = true;
var flag = $(this).prop("checked");
if(!flag){
$("#all").prop("checked",false);
};
$("table input:checkbox:gt(0)").each(function(){
var temp2 = $(this).prop("checked");
if(!temp2){
temp = false;
}
});
if(temp){
$("#all").prop("checked",true);
}
})
$("#btnDelete").click(function(){
var $checkedArr = $("table input:checkbox:gt(0):checked");
if($checkedArr.size()==0){
alert("至少要选中一行数据");
return;
}
var resure = confirm("确定要删除选中的行吗?");
if(resure){
$.each($checkedArr, function(index,value) {
$(this).parent().parent().remove();
});
$("table input:checkbox").prop("checked",false);
}else{
$("table input:checkbox:gt(0)").prop("checked",false);
}
})
</script>
</body>
</html>