dom简单交互效果案例制作~JS（二） |
您所在的位置：网站首页 › js能实现的简单效果有哪些方法 › dom简单交互效果案例制作~JS（二） |
dom简单交互效果案例制作~JS（二）
|
1、排他操作
总结：需要不停的去点击这个按钮，每按下一个上一次点击的按钮背景就必须恢复正常，用for循环每一次在点击之前所有的背景颜色恢复正常，然后在去执行改色操作 按钮1 按钮2 按钮3 按钮4 按钮5 var button = document.getElementsByTagName('button'); console.log(button); // 遍历数组给每个数组一个事件类型 for (var i = 0; i < button.length; i++) { button[i].onclick = function() { // 在点击之前所有buttonbackground清除，排它思想 for (var k = 0; k < button.length; k++) { button[k].style.backgroundColor = ''; } this.style.backgroundColor = "pink"; } } 2、百度换肤效果 注意点：对于最后阶段触发事件以后对于src的改变，需要关注到this.src的改变，如果触发没有反应控制台显示图片路径错误就是最后阶段在字符串拼接阶段错误,解决方法：重新拼接字符串
document.body.style.backgroundImage = 'url(' + this.src + ')'; 解释：当我们触发以后改变body样式中的URL，指向更改部分最后利用this去指向。 body { background: url("bz1.jpg") no-repeat; background-size: cover; } * { padding: 0; margin: 0; } .ih { width: 500px; height: 100px; /* background-color: pink; */ margin: 100px auto; } li { box-sizing: border-box; list-style: none; float: left; width: 125px; height: 100px; border: 1px solid skyblue; /* background-color: skyblue; */ } li img { width: 100%; height: 100%; }
var li = document.querySelector('.ih').querySelectorAll('img');
console.log(li);
for (var i = 0; i < li.length; i++) {
li[i].onclick = function() {
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
3、鼠标悬浮经过和离开的样式改变
解析：利用for循环给每一个事件注册一个事件类型匹配一个程序处理，利用onmouseover鼠标经过和onmouseout鼠标离开去实现样式的改变。这个程序里面恢复原状我们是利用“”； 4、复选框全选效果，复选框所有按钮点击以后全选框也自动被点击
解释：当我们点击了全选按钮就会对input数组进行遍历并且给每一个input样式设定ckecked属性实现选中，对于下面的单个按钮当我们点亮所有按钮以后会自动点亮全选按钮，每点击一个单选按钮就会去遍历所有按钮是否被选中，若全被选中则给allbutton赋值为真，全选框被自动选中。 Document * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } 货物 价格 iPhone12 8000 iPad6 Pro 5000 iPad Air5 2000 Apple WatchSe 2000 var allButton = document.getElementById('j_cbAll'); var input = document.getElementById('j_tb').getElementsByTagName('input'); // console.log(input); allButton.onclick = function() { for (var i = 0; i < input.length; i++) { input[i].checked = this.checked; } } for (var i = 0; i < input.length; i++) { input[i].onclick = function() { var flag = true; // 当我点击了一个去判读其他的按钮是不是被选中，若不选中则allbutton无任何反应 for (var i = 0; i < input.length; i++) { if (!input[i].checked) { flag = false; } allButton.checked = flag; } } } // 给四个input选框注册事件类型 // for (var i = 0; i < input.length; i++) { // input[i].onclick = function() { // var flag = true; // // 每点击一次input按钮进行循环判断内部其他按钮是否选中，!input.ckeckde返回值为true则表示选中。 // for (var i = 0; i < input.length; i++) { // if (!input[i].checked) { // // 存在没有被选中返回一个false值 // flag = false; // } // allButton.checked = flag; // } // } // } |
1、
【本文地址】