1.mv移動端實戰系列視頻教程課件
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> #div div { width: 100%; height: 40px; margin: 10px 0; background-color: #ccc; } #div div.active { background-color: red; } </style> </head> <div id="div"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <body> <script> function addClass(obj, sClass) { var aClass = obj.className.split(' '); if(!obj.className) { obj.className = sClass; return; } for(var i = 0; i < aClass.length; i++) { if(aClass[i] === sClass) return; } obj.className += ' ' + sClass; } function removeClass(obj, sClass) { var aClass = obj.className.split(' '); if(!obj.className) return; for(var i = 0; i < aClass.length; i++) { if(aClass[i] === sClass) { aClass.splice(i, 1); obj.className = aClass.join(' '); break; } } } var div = document.querySelector('#div') var divs = div.getElementsByTagName('div'); for(var i = 0; i < divs.length; i++) { divs[i].setAttribute('index', i) divs[i].onclick = function() { var num=this.attributes['index'].nodeValue for (var i = 0; i < divs.length; i++) { if(i<=num){ // addClass(divs[i],'active') divs[i].className='active' }else{ divs[i].className='' } } } } </script> </body> </html>
2.多組如星星評分
function evaluate() {
var evals = document.querySelectorAll('.evaluate1');//三個父元素
for(var i = 0; i < evals.length; i++) {
addStars(evals[i]);//調用三次
}
function addStars(items) {//每次從父元素獲取li的個數 循環 自定義屬性 添加事件
var lis = items.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i);
lis[i].addEventListener('tap', function() {
for(var i = 0; i < lis.length; i++) {
if(i <= this.attributes['index'].nodeValue) {
lis[i].className = 'current'
} else {
lis[i].className = ''
}
}
}, false)
}
}
}