评分
五星评分基本练习，鼠标移入移出后记录当前点击确定后是几星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color: rgba(0, 0, 0, .5);
cursor: pointer;
}
</style>
</head>
<body>
<span>❤</span>
<span>❤</span>
<span>❤</span>
<span>❤</span>
<span>❤</span>
</body>
</html>
上面是css很简单的样式，默认颜色是.5的黑色，当然下面的span也可以用js for循环来生成
<script>
/*
* 移入：改变span的颜色，从 0 到 鼠标移入的span位置
* 移出：改变span的颜色，从 0 到 鼠标点击后的位置
* 点击：记录点击了第几个
* */
var spanElements = document.querySelectorAll('span');
//获取所有的span
/*
* 当前点击的值
* 默认是-1，因为第0个表示的是1分
* */
var n = -1;
for ( var i=0; i<spanElements.length; i++ ) {
spanElements[i].index = i;
spanElements[i].onmouseover = function() {
// if (n == -1) {
// change(this.index);
// }
change(this.index);
//直接简化下，如果移入，是小于当前移入的就都是红色，反之大于也就
是没移入之前的 都还是默认颜色
};
spanElements[i].onmouseout = function() {
change(n); //下面点击的时候记录了n为当前点击的是几，那么传参后 就是点击之前的移出就都是红色 ，点击之后的 就是默认灰色了
};
spanElements[i].onclick = function() {
n = this.index;
};
}
/*
* 改变从0到end位置的span颜色
* */
function change(end) {
for ( var i=0; i<spanElements.length; i++ ) {
if (i <= end) {
spanElements[i].style.color = 'rgba(255,0,0,1)';
} else {
spanElements[i].style.color = 'rgba(0,0,0,.5)';
}
}
}
</script>
点击全选和不全选
这个小练习就是歌曲的全选，当所有选中后，就为全选状态，单独的全选按钮也可以控制全选或者不全选
还是简单的css结构=,=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="checkbox" id="checkAll">全选
<ul>
<li><input type="checkbox">0001</li>
<li><input type="checkbox">0002</li>
<li><input type="checkbox">0003</li>
<li><input type="checkbox">0004</li>
<li><input type="checkbox">0005</li>
</ul>
</div>
</body>
</html>
看下js代码
<script>
var checkAllElement = document.querySelector('#checkAll'); //全选按钮
var checkBoxElements = document.querySelectorAll('ul input'); //所有的单选按钮
checkAllElement.onclick = function() {
for ( var i=0; i<checkBoxElements.length; i++ ) {
checkBoxElements[i].checked = this.checked;
//在input里 checked，点击后（checkbox有小勾勾出现）就相当是ture的状态，没有就是false就不用在自定义一个布尔值来控制开关操作，for循环 当所有的单个input是点击状态就相当于全选是checked状态
}
}
for ( var i=0; i<checkBoxElements.length; i++ ) {
checkBoxElements[i].onclick = function() {
/*
* 临时统计法
* */
var n = 0;
for ( var i=0; i<checkBoxElements.length; i++ ) {
if (checkBoxElements[i].checked) { //如果其中一个单选n就加1
n++;
}
}
checkAllElement.checked = (n == checkBoxElements.length);
//当n=所有的单选input的长度时，就表示已经是全部都点击了，那么==的结果就为true，那全选的cheked的状态也为true了，反之有一个没点击 那么就是false，全选也为false状态
}
}
</script>
还有我们也可以通过单选的input是checked n就加1，在点击一次就是关闭那就n减1 通过比较n的值来确定全选的状态
<script>
var checkAllElement = document.querySelector('#checkAll');
var checkBoxElements = document.querySelectorAll('ul input');
var n = 0;
checkAllElement.onclick = function() {
for ( var i=0; i<checkBoxElements.length; i++ ) {
checkBoxElements[i].checked = this.checked;
}
n = this.checked ? checkBoxElements.length : 0;
};
for ( var i=0; i<checkBoxElements.length; i++ ) {
checkBoxElements[i].onclick = function() {
this.checked ? n++ : n--;
checkAllElement.checked = (n == checkBoxElements.length);
}
}
网友评论