前端 javascript 練習題 -簡易年曆及tab切換簡易年曆【千鋒】
前端 javascript
練習題
-
簡易年曆及
tab
切換
簡易年曆【千鋒】
eg1
:將陣列中的值輸出
改變樣式可以直接改樣式,也可以修改類名
var okuang = document . getElementById ( "kuang" ); var oli = document . getElementsByTagName ( "li" ); var arr = [ 11 , 22 , 33 , 44 , 55 ]; var index = 0 ; // 定義一個變數用來儲存索引值 for ( var i = 0 ; i < oli . length ; i ++ ){ // 遍歷給每個 li 新增事件
oli [ i ]. onclick = function (){
for ( var j = 0 ; j < oli . length ; j ++ ){ // 排他功能
oli [ j ]. style . backgroundColor = "#666" ;
oli [ j ]. style . color = "#fff" ;
}
okuang . innerHTML = arr [ index ]; // 此時不能用 arr[i] ,因為在點選之前 for 已經執行完了,此時 i 為 oli 的元素個數值
this . style . backgroundColor = "red" ;
this . style . color = "#000" ;
index ++ ;
}}
解析:
for
迴圈是在頁面載入的時候
,
執行完畢了
// for(var k=0;k<5;k++){
// }
// console.log(k);
// 事件是在觸發的時候 , 執行的
tab
切換案例
點選按鈕換圖片:
var oli = document . getElementsByTagName ( "li" ); // 獲取 li 標籤 var oimg = document . getElementsByTagName ( "img" )[ 0 ]; // 獲取圖片標籤 var index = 0 ; // 儲存索引值,因為在點選按鈕前 for 已經執行完了
for ( var i = 0 ; i < oli . length ; i ++ ){
oli [ i ]. onclick = function (){
oimg . src = 'images/' + index + '.png' ;
index ++ ;
}
}
案例
排他功能
一串input
var oinput = document . getElementsByTagName ( "input" ); for ( var i = 0 ; i < oinput . length ; i ++ ){
oinput [ i ]. onclick = function (){
// 先讓所有的變成原來的樣子
for ( var j = 0 ; j < oinput . length ; j ++ ){
oinput [ j ]. value = " 晴天 " ;
oinput [ j ]. style . background = "#ccc" ;
}
// 再設定當前的樣式
this . value = " 陰天 " ;
this . style . background = "red" ;
}}
透過類名修改樣式
var oinput = document . getElementById ( "btn" ); var odiv = document . getElementById ( "dv" );
oinput . onclick = function (){
// 判斷是否應用了類樣式
if ( odiv . className != "cls" ){
odiv . className = "cls" ; // 當有多個類名時需要注意 留著不需要修改的
} else {
odiv . className = "dd" ;
}};
tab
切換
主要就是排他功能的應用,下面對應的塊,選隱藏,找出點選span
時對應的
li
再讓它顯示
< div class =" box " id =" box ">
< div class =" hd ">
< span class =" current "> 體育 </ span >
< span > 娛樂 </ span >
< span > 新聞 </ span >
< span > 綜合 </ span >
</ div >
< div class =" bd ">
< ul >
< li class =" current "> 我是體育模組 </ li >
< li > 我是娛樂模組 </ li >
< li > 我是新聞模組 </ li >
< li > 我是綜合模組 </ li >
</ ul >
</ div ></ div >< script >
var obox=document.getElementById("box");
var hd=obox.getElementsByTagName("div")[0];
var bd=obox.getElementsByTagName("div")[1];
var oli=bd.getElementsByTagName("li");
var ospan=hd.getElementsByTagName("span");
for(var i=0;i<ospan.length;i++){
ospan[i].setAttribute("index",i); // 點選之前就把索引儲存在 span 標籤中
ospan[i].>
// 將所有的 span 樣式移除
for(var j=0;j<ospan.length;j++){
ospan[j].className="";
//ospan[j].removeAttribute("class");
}
// 設定當前的 span 類樣式
this.className="current";
// 先將所有地 li 隱藏
for(var k=0;k<oli.length;k++){
oli[k].removeAttribute("class");
}
// 獲取當前被點選的索引值
var index=this.getAttribute("index");
// 當前點選 span 對應的 li 顯示
oli[index].className="current";
}
}
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69947096/viewspace-2659708/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- C++ 練習 簡易日曆C++
- 前端 javascript 練習題--Math、Data及函式封裝【千鋒】前端JavaScript函式封裝
- 前端 javascript 練習題--表格的操作及進度條的實現【千鋒】前端JavaScript
- 前端小demo——tab切換前端
- 日曆2021年日曆表|2021年日曆表列印版 Excel版Excel
- Vue學習10_Vue實現簡易的切換登入方式Vue
- 前端 JavaScript 實現一個簡易計算器前端JavaScript
- JavaScript簡易留言板效果JavaScript
- 前端學習02:jQuery 日曆前端jQuery
- 前端學習 node 快速入門 系列 —— 簡易版 Apache前端Apache
- 2020年網易香港上市招股書及簡要資料
- 簡易方程
- 簡易ApiAPI
- C語言列印年曆C語言
- 二、Java之萬年曆Java
- 使用JavaScript設定Tab欄自動切換JavaScript
- javascript實現tab切換的四種方法JavaScript
- web前端 javascript 練習題一Web前端JavaScript
- 縱享絲滑滑動切換的周月日曆,水滴效果,豐富自定義日曆樣式,仿小米日曆(ViewDragHelper實現)View
- 封裝一個簡單的日曆元件封裝元件
- 學習Promise && 簡易實現PromisePromise
- 簡易實用的JavaScript日期時間操作!JavaScript
- Solidity 簡易教程Solid
- flutter簡易教程Flutter
- syncthing 簡易教程
- 深圳Python培訓學習:Python3 簡介–[千鋒]Python
- 利用js製作簡單的動態日曆JS
- Flask學習之旅--簡易留言板Flask
- 學習日曆-初始
- Win10日曆應用怎麼更換主題_Win10日曆應用如何更換背景Win10
- Oracle和JDE日曆轉換Oracle
- namedtuple簡易實現
- 手寫簡易PromisePromise
- 簡易版管道模式模式
- 簡易Dialog封裝封裝
- 簡易ATM系統
- 手寫簡易webpackWeb
- XSD 簡易元素概述