請為下面的DIV設置樣式:
摘要:學習好多同學不知道怎么上手,跟著網上的新手教程做了一遍又覺得很簡單,但是真正自己用起來又覺得寫不出什么東西,我覺得學習最好的方法就是跟著有趣的例子做所以我們的口號是每天一例,輕松今天給大家帶來第一個例子,簡單操作,效果先看下圖代碼設置樣式
學習javascript好多同學不知道怎么上手,跟著網上的新手教程做了一遍又覺得javascript很簡單,但是真正自己用起來又覺得寫不出什么東西,我覺得學習最好的方法就是跟著有趣的例子做,所以我們的口號是“每天一例,輕松javascript”
今天給大家帶來第一個例子,簡單Dom操作,效果先看下圖
html代碼
DIV設置樣式 請為下面的DIV設置樣式:
請選擇背景顏色
- 紅
- 黃
- 藍
請選擇寬度
- 200
- 300
- 400
請選擇高度
- 400
- 500
- 600
css代碼
ul li { display: inline; list-style-type: none; } p { float: left; } #mainbox { width: 740px; height: 420px; background: #ccc; float: left; padding: 10px; } #mainbox p { font-size: 20px; font-weight: bold; margin: 0; line-height: 38px; } #mainbox input { border: none; background: #ff0000; color: #fff; width: 100px; height: 40px; font-weight: bold; cursor: pointer; } #setBox { width: 100px; height: 100px; border: 2px solid #000; margin: 20px 0; background: #fff; } #shadow { width: 100%; height: 100%; background: #000; position: absolute; opacity: 0.6; z-index: 9; display: none; } #jumpDiv { width: 270px; height: 170px; background: #fff; border: 10px solid #999; position: absolute; padding: 20px 0 0 30px; display: none; z-index: 99; left: 50%; top:15%; margin: 0 auto; } .controlBox { width: 100%; float: left; } .controlBox p { width: 120px; margin: 0; padding: 6px 0 0 0; } #jumpDiv ul { width: 140px; float: left; padding: 0; margin: 0; } #jumpDiv ul li { width: 30px; height: 30px; border: 1px solid #999; font-size: 10px; float: left; margin: 5px; background: #ffffd;; line-height: 30px; text-align: center; cursor: pointer; display: block; } #controlButton { text-align: center; padding: 5px 0 0 0; width: 100%; height: 30px; float: left; } #controlButton input { width: 60px; height: 30px; background: #000080; text-align: center; color: #fff; line-height: 30px; border: 1px solid #ccc; cursor: pointer; }
javascript代碼
window.onload = function () { function luka(element) { //if (/#/.test(element) == true) 正則也可以匹配,不過正則的效率沒有函數高,貌似任何語言都是 if (element.indexOf("#") > -1) { return document.getElementById(element.replace(/#/,"")); }; if (element.indexOf(".") > -1) { return document.getElementsByClassName(element.replace(/./g,"")); }; if (/^[a-zA-Z]+&/.element = true) { return document.getElementsByTagName(element); }; console.log(element); }; //下面主要是為了偷懶寫的循環,不然一個個li去學控制很煩,而且這樣能讓html看著很清爽,記住寫代碼就是要怎么偷懶怎么寫,這里的偷懶是復用的意思,用最少的功能實現最優的功能 function liClick() { var obj = luka("li"); //console.log(obj.length); for (var i = 0; i < obj.length; i++) { obj[i].index = i; obj[i].onclick = function() { var numClick = this.index; if (0 <= numClick <= 2) { luka("#setBox").style.backgroundColor = luka("li")[numClick].style.backgroundColor; }; if (3 <= numClick <= 5) { luka("#setBox").style.width = luka("li")[numClick].innerHTML+"px"; }; if (6 <= numClick <= 8) { //等效 numClick == 6 || numClick == 7 || numClick == 8 luka("#setBox").style.height = luka("li")[numClick].innerHTML+"px"; }; }; }; }; function shadow() { luka("#shadow").style.display = "none"; luka("#jumpDiv").style.display = "none"; }; luka("#setButton").onclick = function() { luka("#shadow").style.display = "block"; luka("#jumpDiv").style.display = "block"; }; luka("#reset").onclick = function() { luka("#setBox").style.width = "100px"; luka("#setBox").style.height = "100px"; luka("#setBox").style.backgroundColor = "#fff"; }; luka("#ok").onclick = shadow; luka("#shadow").onclick = shadow; //點擊陰影關閉遮罩和彈出的控制框 luka("#jumpDiv").onmouseover = liClick; //綁定事件響應的層 }
知識點
document.getElementById or getElementsByClassName or getElementsByTagName 這類操作我們經常要用,反復打,又麻煩,效率又低,所以我們封裝一個庫,方便之后調用,我寫的這個:
luka("#id")這種方式就可以調用getElementById
luka(".id")調用getElementsByClassName
luka("element")調用getElementsByTagName
PS:為什么叫luka是因為我喜歡,我愛
不知道大家是不是和我一樣,剛開始覺得遮罩很神奇,其實真做了就很簡單,遮罩就是加了一個div的半透明層,操作一下控制這個層的display屬性就可以簡單的實現了
思考:
彈出的層怎么能用鼠標拖動呢?如果你有興趣,實現了回復我吧
最后求大神指教,求大神優化代碼
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89030.html
摘要:學習好多同學不知道怎么上手,跟著網上的新手教程做了一遍又覺得很簡單,但是真正自己用起來又覺得寫不出什么東西,我覺得學習最好的方法就是跟著有趣的例子做所以我們的口號是每天一例,輕松今天給大家帶來第一個例子,簡單操作,效果先看下圖代碼設置樣式 學習javascript好多同學不知道怎么上手,跟著網上的新手教程做了一遍又覺得javascript很簡單,但是真正自己用起來又覺得寫不出什么東西,...
摘要:學習好多同學不知道怎么上手,跟著網上的新手教程做了一遍又覺得很簡單,但是真正自己用起來又覺得寫不出什么東西,我覺得學習最好的方法就是跟著有趣的例子做所以我們的口號是每天一例,輕松今天給大家帶來第一個例子,簡單操作,效果先看下圖代碼設置樣式 學習javascript好多同學不知道怎么上手,跟著網上的新手教程做了一遍又覺得javascript很簡單,但是真正自己用起來又覺得寫不出什么東西,...
摘要:他背后的故事,令人動容只是逗你玩為何小程序目前難以取代微信小程序也已經推出了一段時間了,在小程序面世伊始,有觀點認為它能夠取代手機,給用戶帶來更清爽的體驗。 周末快樂,今天給大家一個經常會用的例子,TAB切換,TAB的原理就是用js來控制不同層的display屬性,今天給大家這個也是同樣的原理,還是操作css的更多,用js把文章顯示區域的css對應切換,這樣就實現了不同的顯示效果。 還...
摘要:他背后的故事,令人動容只是逗你玩為何小程序目前難以取代微信小程序也已經推出了一段時間了,在小程序面世伊始,有觀點認為它能夠取代手機,給用戶帶來更清爽的體驗。 周末快樂,今天給大家一個經常會用的例子,TAB切換,TAB的原理就是用js來控制不同層的display屬性,今天給大家這個也是同樣的原理,還是操作css的更多,用js把文章顯示區域的css對應切換,這樣就實現了不同的顯示效果。 還...
摘要:他背后的故事,令人動容只是逗你玩為何小程序目前難以取代微信小程序也已經推出了一段時間了,在小程序面世伊始,有觀點認為它能夠取代手機,給用戶帶來更清爽的體驗。 周末快樂,今天給大家一個經常會用的例子,TAB切換,TAB的原理就是用js來控制不同層的display屬性,今天給大家這個也是同樣的原理,還是操作css的更多,用js把文章顯示區域的css對應切換,這樣就實現了不同的顯示效果。 還...
閱讀 2774·2021-11-22 15:11
閱讀 3537·2021-09-28 09:43
閱讀 2889·2019-08-30 13:05
閱讀 3431·2019-08-30 11:18
閱讀 1447·2019-08-29 16:34
閱讀 1300·2019-08-29 13:53
閱讀 2908·2019-08-29 11:03
閱讀 1658·2019-08-29 10:57