夜光序言：
忽然之间 你忽略的我忽略的所有细节
当初的猜疑好奇爱恨痴嗔却已走远
忽然之间 你发现的我发现的所有改变
当初的微笑眼泪喜怒哀乐都已抛在昨天
我没想过再遇见的时刻
所有回忆 青丝成雪
忽然之间
你忽略的我忽略的所有细节
当初的猜疑好奇爱恨痴嗔却已熹微
忽然之间 你发现的我发现的所有改变
当初的微笑当初的微笑眼泪喜怒哀乐都已云烟
正文：
tab栏封装夜光 |
多个tab栏相互不影响
要想多个盒子不相互影响，我们可以通过id给他们分开
封装tab栏
<script>
window.onload = function(){
function tab(){}
tab("one");
tab("two");
tab("three");
}
</script>
</head>
<body>
<div class="box" id="one">
<div class="mt">
<span class="current">新闻</span>
<span>体育</span>
<span>八卦</span>
<span>娱乐</span>
</div>
<div class="mb">
<ul>
多个tab栏如何封装？
<script>
window.onload = function(obj){
function tab(){
var target = document.getElementById(obj);
var spans = target.getElementsByTagName("span");
var lis = target.getElementsByTagName("li");
//var spans = document..getElementById(obj).getElementsByTagName("span"); 但是不用这句话
for(var i=0;i<spans.length;i++){
spans[i] = i;
spans[i].onmouseover = function()
{
for(var j=0;j<spans.length;j++)
{
spans[i].className = "";
lis[j].className = "";
}
this.className = "current";
lis[this.index].className = "show";
}
}
}
tab("one");
tab("two");
tab("three");
}
</script>
三个循环夜光 |
两个小循环
For(初始化；条件；增量)
While（） 当
Do{} while{}
While(条件) {语句}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var sum=0;
for(var i = 0;i<=100;i++)
{
sum=sum+i;
}
document.write(sum);
var j=1;
var sum1=0;
while(j<=100)
{
sum1+=j;
j++;
}
document.write(sum1);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var sum=0;
for(var i = 0;i<=100;i++)
{
sum=sum+i;
}
document.write(sum);
var j=1;
var sum1=0;
while(j<=100)
{
sum1+=j;
j++;
}
document.write(sum1);
//帅气
var sum2=0;
var k=1;
do
{
sum2 += k;
k++;
}
while(k<=100);
document.write(sum2);
</script>
</body>
</html>
Do while 至少执行一次
While 不一定
switch使用夜光 |
多分支语句：switch
和 if else 十分相似
但是switch 效率更高
Switch(参数)
{
Case参数1：
语句；
Break； 退出的意思
Case 参数2；
语句；
Break; 退出的意思
.................
Default; 默认的
语句；
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var king = document.getElementById("king"); //获取元素
var btn = document.getElementById("btn");
btn.onclick = function(){
var val = king.value; //这边如果用this指向事件的调用者btn
switch(val)
{
case"苹果":
alert("苹果：5元一斤");
break;
case"西瓜":
alert("西瓜：2元一斤");
break;
default:
alert("sorry,今天没货");
}
}
}
</script>
</head>
<body>
<input type="text" id="king"> <button id="btn">查询价格</button>
</body>
</html>
下拉菜单夜光 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select name="" id="sale">
<option value="1">路飞</option>
<option value="2">索隆</option>
<option value="3">山治</option>
<option value="4">甚平</option>
</select>
</body>
</html>
下拉菜单的事件 onchange
Sale.onchange = function(){}
星座运势夜光 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 350px;
height: 250px;
border: 1px solid #ccc;
margin: 100px auto;
}
.dt{
padding-left: 20px;
line-height: 30px;
font-weight: 700;
color: cornflowerblue;
}
</style>
</head>
<body>
<div class="box">
<div class="dt">星座运势</div>
<div class="dd">
</div>
</div>
</body>
</html>
继续优化：
.dd-t{
overflow: hidden;
}
//让字下来 嘿嘿