夜光序言：
有一種孤獨是，想笑卻不能笑，想哭卻不能哭，總有一個聲音在耳邊提醒着你：要克制，要堅強，要讓他們覺得你不一樣。你做到了，旁人投來了豔羨和贊許的目光，你微微笑，微微發顫，微微地有一種隻有自己知道的孤獨感。
正文：
隔行變色CEO 夜光 |
<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
}
li{
line-height: 30px;
list-style-type:none;
}
li span{
margin: 5px;
}
</style>
<body>
<div class="box">
<ul>
<li>
<span>創客學院</span><span>夜光</span><span>不斷成長</span>
</li>
</ul>
</div>
</body>
</html>
<script>
window.onload = function(){
var lis = document.getElementsByTagName("li");
alert(lis.length);
}
</script>
<script>
window.onload = function(){
var lis = document.getElementsByTagName("li"); // 注意這裡運用到的是getElementsByTagName。得到所有的li
for(var i=0;i<lis.length;i++){
if(i%2 == 0){ //隻有偶數可以被2整除
lis[i].style.backgroundColor="#ccc";
}
}
}
</script>
// 可以實作隔行變色：
表示出來是奇行的格式
<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
}
li{
line-height: 30px;
list-style-type:none;
}
li span{
margin: 5px;
}
.current{
background-color: palegreen!important; //這是一個重點
}
</style>
<script>
window.onload = function(){
var lis = document.getElementsByTagName("li"); // 注意這裡運用到的是getElementsByTagName。得到所有的li
for(var i=0;i<lis.length;i++){
if(i%2 !== 0){ //隻有偶數可以被2整除
lis[i].style.backgroundColor="#ccc";
}
// 嘿嘿 滑鼠經過：li的時候 底色變亮
lis[i].onmouseover = function(){
this.className = "current"; //這裡是關鍵 必須用this 因為特定
}
}
}
</script>
<body>
<div class="box">
<ul>
<li>
<span>創客學院</span><span>夜光</span><span>不斷成長</span>
</li>
<li>
<span>創客學院</span><span>夜光</span><span>不斷成長</span>
</li>
<li>
<span>創客學院</span><span>夜光</span><span>不斷成長</span>
</li>
<li>
<span>創客學院</span><span>夜光</span><span>不斷成長</span>
</li>
<li>
<span>創客學院</span><span>夜光</span><span>不斷成長</span>
</li>
<li>
<span>創客學院</span><span>夜光</span><span>不斷成長</span>
</li>
</ul>
</div>
</body>
</html>
還需要調整成上圖效果：
帥氣
<script>
window.onload = function(){
var lis = document.getElementsByTagName("li"); // 注意這裡運用到的是getElementsByTagName。得到所有的li
for(var i=0;i<lis.length;i++){
if(i%2 !== 0){ //隻有偶數可以被2整除
lis[i].style.backgroundColor="#ccc";
}
// 嘿嘿 滑鼠經過：li的時候 底色變亮
lis[i].onmouseover = function(){
this.className = "current";
};
// 滑鼠不經過，不變色
lis[i].onmouseout = function(){
this.className = "";
}
}
}
</script>
隔行變色複習夜光 |
帥氣
<script>
window.onload = function(){
var lis = document.getElementsByTagName("li"); // 注意這裡運用到的是getElementsByTagName。得到所有的li
for(var i=0;i<lis.length;i++){
if(i%2 == 0){ //隻有偶數可以被2整除
lis[i].style.backgroundColor="#ccc";
}
else
{
lis[i].style.backgroundColor="red";
}
// 嘿嘿 滑鼠經過：li的時候 底色變亮
lis[i].onmouseover = function(){
this.className = "current";
};
// 滑鼠不經過，不變色
lis[i].onmouseout = function(){
this.className = "";
}
}
}
</script>
用自定義函數計算一個數組的參數的平均值
Length 帥氣
求平均值夜光 |
<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var arr = [1,2,3,4,5,6];
var sum =0;
for(var i=0,a=arr.length;i<a;i++){
sum=sum+arr[i];
}
alert(sum/arr.length);
</script>
</body>
</html>
<script>
var arr=[1,2,3,4,5];
function avg(array){
var len = array.length;
var sum=0;
for(var i = 0;i<len;i++){
sum += array[i]; //sum= sum+arr[i]
}
return sum/len;
}
avg(arr);
alert(avg(arr));
</script>
// 學會不斷總結思考，夜光
var arr=[1,2,3,4,5];
function avg(array){
var len = array.length;
var sum=0;
for(var i = 0;i<len;i++){
sum += array[i]; //sum= sum+arr[i]
}
return sum/len;
}
avg(arr);
alert(avg(arr)); //輸出3
周遊京東背景圖檔夜光 |
字元相連夜光 |
數值相加 字元相連
1+1=2；
“你好”+“麼”
<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
window.onload = function(){
var a = document.getElementById("a");
var btn = document.getElementsByTagName("button")[0];
//這句話 document.getElementsByTagName("button")[0];
btn.onclick = function(){
var num = Number(a.value);
alert(num + num); // 這是重點
}
}
</script>
<body>
<input type="text" id="a"/>
<button>點選一下</button>
</body>
</html>
// 輸出框框中 數字相加之和
全選和反選夜光 |
面試十分重要 這一塊
上下兩個盒子【帥氣】
<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--//上下兩個盒子 因為樣式問題-->
<div id="top"> // 上面一個盒子
<button>全選</button>
<button>清楚</button>
<button>反選</button>
</div>
<div id="botton"> // 下面一個盒子
<ul>
<li>選項：<input type="checkbox"></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--//上下兩個盒子 因為樣式問題-->
<div id="top">
<button>全選</button>
<button>清楚</button>
<button>反選</button>
</div>
<div id="botton">
<ul>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
window.onload = function(){
var btns = document.getElementsByTagName("button"); // getElementsByTagName 這裡用到一個集合
var inputs = document.getElementById("bottom").getElementsByTagName("input"); //這是高端操作
// bottom裡面的input
btns[0].onclick = function(){ //btns[0]代表的是全選這個按鈕
for(var i=0;i<inputs.length;i++){
inputs[i].checked = true; //選中表單
}
}
}
</script>
<body>
<!--//上下兩個盒子 因為樣式問題-->
<div id="top">
<button>全選</button>
<button>清楚</button>
<button>反選</button>
</div>
<div id="bottom"> //注意細節 别寫錯的單詞 嘿嘿
<ul>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
<li>選項：<input type="checkbox"></li>
</ul>
</div>
</body>
</html>