js第七節-運算子，流程控制
<li class="lastLi clear"><input type="checkbox" id="lastInput"/><span class="span2">全選</span><a href="#"><img src="img/9.gif" /></a><a href="#"><img src="img/10.gif" /></a><a href="#"><img src="img/11.gif" /></a></li>
上面這行程式碼，如果不給任何的樣式的話，我們會遇到一些麻煩，這些元素都不對齊，而且通過設定display:inline-block這個的話，我們可能會影響到其他的元素佈局，這個時候，我個人建議，用浮動來做，給上面的每個元素增加浮動之後，在去調節這些元素的寬高的話，就能夠達到我們想要的結果。
注意：在ie678中可能浮動浮出界了，可能是你的元素長度超過設定的長度了，那為什麼火狐沒有超呢？這個時候可能是img邊框的大小沒有清楚（border:none;)，在火狐中影象的邊框是自動清除的。
原始碼：(用到了運算子的++ %，for， if，自定義屬性，陣列等)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>百度音樂-全選操作</title>
<script>
window.onload = function(){
var aDiv = document.getElementById('music');
var aLi = aDiv.getElementsByTagName('li');
//var aLastLi = document.getElementById('lastLi');
var aImg = aDiv.getElementsByTagName('img');
var aLastInput = aLi[6].getElementsByTagName('input')[0];
var arr = ['img/6.gif','img/7.gif','img/8.gif'];
var arr1 = ['img/9.gif','img/10.gif','img/11.gif'];
var num = 0;
for(var i = 0;i < aLi.length - 1;i++){
aLi[i].index = i;
if(i % 2 == 0){
aLi[i].style.background = '#f7ffff';
}
aLi[i].onmouseover = function(){
aLi[this.index].style.background = "#efefef";
};
aLi[i].onmouseout = function(){
if(aLi[this.index].getElementsByTagName('input')[0].checked){
aLi[this.index].style.background = "#efefef";
}else{
if(this.index % 2 == 0){
aLi[this.index].style.background = '#f7ffff';
}else{
aLi[this.index].style.background = '#fff';
}
}
};
aLi[i].getElementsByTagName('input')[0].onclick = function(){
num = 0;
for(var i = 0;i < aLi.length - 1;i++){
if(aLi[i].getElementsByTagName('input')[0].checked){
num++;
}
if(num == aLi.length - 1){
aLastInput.checked = true;
}else{
aLastInput.checked = false;
}
}
};
}
aLastInput.onclick = function(){
if(aLastInput.checked){
for(var i = 0;i < aImg.length;i++){
aImg[i].src = arr[i];
}
for(var i = 0;i < aLi.length - 1;i++){
aLi[i].getElementsByTagName('input')[0].checked = true;
aLi[i].style.background = "#efefef";
}
}else{
for(var i = 0;i < aImg.length;i++){
aImg[i].src = arr1[i];
}
for(var i = 0;i < aLi.length - 1;i++){
aLi[i].getElementsByTagName('input')[0].checked = false;
if(i % 2 == 0){
aLi[i].style.background = '#f7ffff';
}else{
aLi[i].style.background = '#fff';
}
}
}
};
};
</script>
<style>
body,ul{margin:0;padding:0;font-size:14px;}
.clear{zoom:1;}
.clear:after{content:"";display:block;clear:both;}
#music{width:310px;border:1px solid #000;margin:30px auto;background:#ffffff;}
li{list-style:none;padding:10px;}
.lastLi{border-top:1px solid #c0c0c0;padding:5px 10px 0 10px;;}
input{margin-right:10px;}
.span1{margin:0 36px 0 36px;}
.lastLi a{float:left;}
#lastInput{float:left;height:20px;}
.span2{float:left;height:25px;line-height:25px;}
.lastLi img{padding:0 6px 0 6px;border:none;}
</style>
</head>
<body>
<div id="music">
<ul>
<li><input type="checkbox" />私奔 <span class="span1"></span>樑博</li>
<li><input type="checkbox" />北京北京 <span class="span1"></span>樑博,黃勇</li>
<li><input type="checkbox" />我愛你中國 <span class="span1"></span>樑博</li>
<li><input type="checkbox" />花火 <span class="span1"></span>樑博</li>
<li><input type="checkbox" />回來 <span class="span1"></span>樑博</li>
<li><input type="checkbox" />愛要有你才完美<span class="span1"></span>樑博,那英</li>
<li class="lastLi clear" id="lastLi"><input type="checkbox" id="lastInput"/><span class="span2">全選</span><a href="#"><img src="img/9.gif" /></a><a href="#"><img src="img/10.gif" /></a><a href="#"><img src="img/11.gif" /></a></li>
</ul>
</div>
</body>
</html>
相關推薦
js第七節-運算子，流程控制
在分析這個題之前，我們先扯一下html和css的知識，當我們在一行當中輸入好幾個行內元素的時候，我們發現這個行內的格局會發生很大的變化，怎麼調節也對不齊這些行內元素的標籤。比如： <li class="lastLi clear"><input type="checkbox" id="l
java 運算子，流程控制語句，鍵盤錄入
1.比較運算子 public static void main(String args[]) { int x = 3; int y = 4; int z = 5; System.out.println(x > y); System.out.println(x &
運算子，流程控制語句
算數運算：% 取模，返回除法的餘數 如 20 % 10 = 0 ** 冪 返回x的y次冪 如 2**3 = 8 // 取整除-返回商的整數部分
3、Python基礎——輸入輸出，簡單運算子，流程控制，轉譯
參考原文：https://www.cnblogs.com/zihe/p/6951804.html 一、1、輸入輸出 python3中統一都是input python2中有raw_input等同於python3的input，另外python2中也有input #python輸入程式碼 &g
php學習筆記：第四節--php中的運算子和流程控制
PHP的運算子、流程控制和其他語言的運算子一樣，沒什麼特別的，這裡不再累贅。 特別的運算子： .= $a.=$b
學習python的第七天（格式化輸出，基本運算符，流程控制主if）
字典 表白 ron 四種 註意 clas 第一個 for 符號 5.5自我總結 一.格式化輸出 1.占位符 a = 1 b = 2 print('%S %s'%(a,b)) #1 2 print('%s %s'%(1,2)) #1 2 2.f
js---11運算符，流程控制，真假
arr body color 空格 one round red 轉換 class <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="tex
JAVAscript學習筆記 jsBOM 第七節 （原創） 參考js使用表
span aid cat alert 當前頁 config 彈出框 pan 針對 <html> <head> <title>day02_js</title> <scrip
webpack4.x 處理less、sass檔案,分離編譯後的css，自動新增css字首,自動消除冗餘css 第七節
處理less檔案 我們建立一個src/less/a.less檔案 @a:red; #div1{ color: @a; ul{ li{ list-style: none; height:30px;
Django 快速搭建部落格 第七節（文章詳情頁，markdown語法）
更多最新原創文章請訪問：最新原創主頁 更多最全原創文章請訪問：更多原創主頁 上一節我們把真正的index.html顯示出來了，只是一個摘要，接下來我們要做的是當我們點選標題或者繼續閱讀的時候，會開啟詳情頁 1 base.html的
第七節，Springboot日誌配置SLF4J
SpringBoot預設幫我們配置好了日誌；本例使用的SLF4J 1.SLF4J提供了五種日誌級別 trace：跟蹤，級別最低的日誌 debug：除錯，用來檢視除錯內容 info：資訊，一般記錄一些方法執行等 warn：警告，可能發生錯誤的程式碼 error：錯誤，一般在
第七節， 靜態成員變數和靜態成員函式
用static修飾的成員變數和成員函式叫做靜態成員變數和靜態成員函式。 下面我們看靜態成員變數和靜態成員函式有什麼不同的地方。 首先看下面一個例子： class Cat { int age; public: static int manyCounts;
《C# 爬蟲 破境之道》：第二境 爬蟲應用 — 第七節：併發控制與策略
我們在第五節中提到一個問題，任務佇列增長速度太快，與之對應的採集、分析、處理速度遠遠跟不上，造成記憶體快速增長，頻寬佔用過高，CPU使用率過高，這樣是極度有害系統健康的。 我們在開發採集程式的時候，總是希望能夠儘快將資料爬取下來，如果總任務數量很小（2~3K請求數之內），總耗費時長很短（1~2分鐘之內），那麼
第七節
setattr static 靜態屬性 set 類方法 訪問 att pan 變量 類的方法 1.靜態方法 class Dog(object): def __init__(self,name): self.name = name @staticme
Node.js 使用Nimble實現串行流程控制
串行 nod clas exc ast div span 流程控制 logs Nimble是Node.js下的流程控制工具。 使用如下命令進行安裝： npm install nimble 測試代碼： var flow = require(‘nimble‘); flo
數組，流程控制
表達 邏輯運算符 mil bool 算術運算符 boolean 位運算符 返回值 賦值 一．數組的基本概念及作用 數組是相同數據類型元素的集合 數組本身是引用數據類型，即對象。但是數組可以存儲基本數據類型，也可以存儲引用數據類型 Int [ ]a = new int [
視圖，觸發器，事物，儲存過程，函數，流程控制
tro then database lap data rtrim( -s sun .com 一視圖 建表 create database o; use o; create table teacher( tid int primary key auto_increment
day1_字符集，流程控制語句
pre 字符集 locked rto 鎖定 bre tac 菜單 break 作業1： 輸入用戶名密碼 認證成功後顯示歡迎信息 輸錯三次後鎖定 解答： 流程圖： 代碼： 1 #!/usr/bin/env python 2 # *_* coding
python全棧開發【第四篇】Python流程控制
int 語法 password sat code 修改 就是 bre and 十二 流程控制之if…else 既然我們編程的目的是為了控制計算機能夠像人腦一樣工作，那麽人腦能做什麽，就需要程序中有相應的機制去模擬。人腦無非是數學運算和邏輯運算，對於數學運算在上一節我們已經說
第七節 文件的增刪改查
gbk 回到最初 移動 nes 所有 utf == 滿了 tell 集合是無序的 文件的增刪改查 #edit by weiwei xu #-*- coding:UTF-8 -*- ‘‘‘ f=open(‘haha‘,‘r‘,encoding=‘utf-8‘)#因為windo