🍣前端~JS练习
目录
1. 隔行换色
2. 全选和全不选，反选
3. 省市联动
4. 五星好评
5. 心跳动画
一、隔行换色（需要过滤第一行）
要求效果图：》》》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../js/jquery-3.6.0.js"></script>
<style>
#table,th,td{
border: pink 3px solid;
border-collapse: collapse;
text-align: center;
width: 400px;
margin-left: 35%;
}
</style>
</head>
<body>
<table id="table">
<tr class="tr">
<th>分类</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr class="tr1">
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr class="tr1">
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr class="tr1">
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr class="tr1">
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
</table>
<script>
$(".tr1:odd").css("background","red");
$(".tr1:even").css("background","yellow");
</script>
</body>
</html>
二、全选和全不选、反选
目标效果》》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../js/jquery-3.6.0.js"></script>
<style>
#table,th,td{
border: pink 3px solid;
border-collapse: collapse;
text-align: center;
width: 400px;
margin-left: 35%;
}
</style>
<script>
$(function(){
var i=1;
$("#all").click(function(){
if(i%2!=0){
console.log($(".one"));
$(".one").prop('checked',true);
}else{
console.log("ddddd")
console.log($(".one"));
$(".one").prop('checked',false);
}
i++;
});
$("#reset").click(function(){
$(".one").each(function(){
this.checked=!this.checked;
});
//$('.one').attr('checked',!this.checked);
});
})
</script>
</head>
<body>
<table id="table">
<tr class="tr">
<th>
<input id="all" type="checkbox">
<input id="reset" type="button" value="反转">
</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr class="tr1">
<td>
<input class="one" type="checkbox">
</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr class="tr1">
<td>
<input class="one" type="checkbox">
</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr class="tr1">
<td><input class="one" type="checkbox" ></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr class="tr1">
<td><input class="one" type="checkbox"></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
</table>
</body>
</html>
三、省市联动
目的效果图》》》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
请选择省市：
<select id="address" onchange="cy(this.value)">
<option value='3' style="display:none;">--选择省份--</option>
<option value="0" class="fen">安徽</option>
<option value="1" class="fen">江苏</option>
<option value="2" class="fen">上海</option>
</select>
<select id="city">
<option style="display: none;">--选择地区--</option>
</select>
</div>
<script>
var cities=new Array(3);
cities[2]=['浦东新区','黄浦区','徐汇区','长宁区','宝山区'];
cities[1]=['南京市','无锡市','淮安市','常熟市'];
cities[0]=['阜阳市','合肥市','滁州市','蚌埠市','六安市','宿州市'];
function cy(val){
//7.获取第二个下拉列表
var city = document.getElementById("city");
//9.清空第二个下拉列表的option内容
city.options.length=1;
//2.遍历二维数组中的省份
for(var i=0;i<cities.length;i++){
//注意，比较的是角标
if(val==i){
//3.遍历用户选择的省份下的城市
for(var j=0;j<cities[i].length;j++){
//alert(cities[i][j]);
//4.创建城市的文本节点
var textNode = document.createTextNode(cities[i][j]);
//5.创建option元素节点
var option = document.createElement("option");
//6.将城市的文本节点添加到option元素节点
option.appendChild(textNode);
//8.将option元素节点添加到第二个下拉列表中去
city.appendChild(option);
}
}
}
}
</script>
</body>
</html>
四、五星好评
评分五角星随鼠标移动显示（当鼠标放在五角星上时前面的显示为黑色，后面的显示白色五角星）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../js/jquery-3.6.0.js"></script>
<title>五星好评</title>
<style>
ul{
list-style: none;
}
li{
display: inline-block;
margin-left: 17px;
}
span,fieldset{
font-family: '华文行楷';
font-size: 20px;
width: 20%;
}
</style>
</head>
<body>
<ul>
<fieldset>
<legend><span>记得五心好评哟~</span></legend>
<li id="li1" onclick="alert('亲~不要呀😫');$('#li1').text('🤍')">🤍</li><li>🤍</li><li>🤍</li><li>🤍</li><li>🤍</li>
</fieldset>
</ul>
<script>
//console.log($("li"));
var list=$("li");
var jslist=[];
list.each(function(index,e){
jslist.push(e);
})
//console.log(jslist);
list.each(function(index,e){
// console.log($(this));
$(e).mouseover(function(){
//刷新爱心
for(var i=0;i<jslist.length;i++){
$(list[i]).text('🤍');
console.log($(list[0]).text('🤍'))
}
//console.log($(e).text());
//console.log(index);
//注入爱心
for(var i=0;i<=index;i++){
$(list[i]).text('🧡');
console.log($(list[0]).text('🧡'))
}
})
})
</script>
</body>
</html>
五、通过定时器编写心跳画面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
text-align: center;
height: 500px;
line-height: 500px;
}
#div1{
font-size: 100px;
color: pink;
}
#div2{
font-size: 200px;
color: salmon;
}
#div3{
font-size: 300px;
color: gold;
}
#div4{
font-size: 400px;
color: darkturquoise;
}
#div5{
font-size: 500px;
color: darkmagenta;
}
#div6{
font-size: 600px;
color: blue;
}
#div7{
font-size: 700px;
color: red;
}
</style>
</head>
<body>
<div class="div1" id="div1">
♥
</div>
<script>
var demo=document.getElementById("div1");
var i=1;
setInterval(() => {
demo.id='div'+i++;
if(i==8){
i=0;
}
}, 250);
</script>
</body>
</html>
扫一扫
3610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
