1.循环精灵图
核心思想:运用for循环,修改精灵图的背景位置background-position
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 1.获取元素
var lis = document.querySelectorAll('li');
for (var i = 0;i<lis.length;i++){
var index = i*44;
lis[i].style.backgroundPosition = '0 -'+ index +'px';
}
</script>
2.隐藏和显示文本框内容
获得焦点 onfocus 失去焦点 onblur
如果获得焦点,判断表单里的内容是否为默认文字,如果是默认文字,清空表单内容
<style>
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
var text = document.querySelector('input');
text.onfocus = function() {
if(this.value === '手机') {
this.value = '';
}
this.style.color = '#333';
}
text.onblur = function() {
if(this.value === '') {
this.value = '手机';
}
this.style.color = '#999';
}
</script>
</body>
</html>
3密码框验证信息
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display:inline-block;
font-size: 12px;
color: #999;
background: url(图片/user.png) no-repeat left center;
padding-left: 50px;
}
.wrong {
color:red;
background: url(图片/btn.png) no-repeat left center;
}
.right{
color:chartreuse;
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<P class="message">请输入6~16位密码</P>
</div>
<script>
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
ipt.onblur = function() {
if(this.value.length < 6 || this.value.length > 16 ) {
message.className = 'message wrong';
}else{
message.className = 'message right';
}
}
</script>
</body>
</html>
4百度换肤效果
<body>
<ul class="baidu">
<li><img src="图片/1.png" alt=""></li>
<li><img src="图片/2.png" alt=""></li>
<li><img src="图片/3.png" alt=""></li>
</ul>
<script>
// 1.获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2.循环注册事件
for (var i = 0;i < imgs.length ; i++) {
imgs[i].onclick = function() {
// this.src 就是我们点击图片的路径
// 把这个路径 this.src 给body
document.body.style.backgroundImage = 'url('+this.src+')';
}
}
</script>
</body>
</html>
5表格隔行换色效果
鼠标经过事件 onmouseover 鼠标离开 onmouseout
核心思路: 鼠标经过tr行,当前行背景换色
6表单全选和取消全选
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" >
</td>
<td>iphone</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" >
</td>
<td>ipad pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" >
</td>
<td>iphone5</td>
<td>6000</td>
</tr>
</tbody>
</table>
</div>
<script>
// 1.全选和取消全选做法: 让下面所有复选框checked属性(选中状态)跟随 全选按钮即可
var j_cbAll = document.getElementById('j_cbAll');
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
j_cbAll.onclick = function() {
for(var i=0;i<j_tbs.length;i++) {
j_tbs[i].checked = this.checked;
}
}
// 2.下面复选框需要全部选中,上面全选才能选中做法; 给下面所有复选框绑定点击事件,每次点击,都要循环
for(var i = 0;i<j_tbs.length;i++){
j_tbs[i].onclick = function() {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查4个小按钮是否全被选中
for(var i = 0; i < j_tbs.length ; i++){
if(!j_tbs[i].checked){
flag = false;
break;
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
</html>