JavaScript 學習 11.25

waylonZXH發表於2018-11-25
JavaScript

選項卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
    #div1 .active{background: yellow;}
    #div1 div{width: 200px;height: 200px; background: #ccc;
    border: 1px solid #999; display: none}
</style>
<script>
    window.onload=function(){
        var oDiv=document.getElementById('div1');
        var aBtn=oDiv.getElementsByTagName('input');
        var aDiv=oDiv.getElementsByTagName('div');
        for(var i=0;i<aBtn.length;i++){
            aBtn[i].index=i;
            aBtn[i].onclick=function(){
                // alert(this.value);
                for(var j=0;j<aBtn.length;j++){
                    aBtn[j].className='';
                    aDiv[j].style.display='none';
                }
                this.className='active';
                //aDiv[i].style.display='block';
                aDiv[this.index].style.display='block';
            }
        }
    }
</script>
</head>
<body>
<div id="div1">
    <input class="active" type="button" value="教育">
    <input type="button" value="出國">
    <input type="button" value="招生">
    <input type="button" value="培訓">
    <div style="display: block">1111</div>
    <div>2222</div>
    <div>3333</div>
    <div>4444</div>
</div>
</body>
</html>

if(a%2==0)
{
alert(‘雙數’)
}else
{}

a%2==0?alert(‘雙數’)：alert(‘單數’)

break//中斷迴圈
continue中止本次迴圈
for(var i=0;i<arr.length;i++)
for(var i in json)
var json={a:12, b:5, c:‘abc’};
json.b++;
alert(json.b);

arguments //（陣列 存引數 不定參）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<script>
    function css(){
        if(arguments.length==2){
            return arguments[0].style[arguments[1]];
        }else{
            arguments[0].style[arguments[1]]=arguments[2];
            
        }
    }
    window.onload=function(){
        var oDiv=document.getElementById('div1');
        // alert(css(oDiv,'width'));
        css(oDiv,'background','green');
    }
</script>


</head>
<body>
    <div id="div1" style="width: 200px;height: 150px;background: #ccc;"></div>
</body>
</html>

陣列的基本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    
    </style>
    <script>
    var a=[1,2,3,4]
    var b=[4,5,6]
    //a.length=3;
    a.push(8)//從末尾插入8
    a.pop();//刪除陣列尾部的數
    a.unshift(5)//從陣列頭部插入5
    // a.length=4;
    //alert(a.concat(b))//b插入a
    a.splice(1,2,'a','b')//從第一個位子刪除兩個元素，然後新增a，b
   // a.sort();//陣列排序
    a.sort(function(n1,n2){
        /*if(n1<n2){
            return -1;
        }else if(n1>n2){
            return 1;
        }else{
            return 0;
    }*/
        return n1-n2
    }
    )//數字大小排序
    alert(a.join('❤'));//a陣列中由❤相連    連線符
    
    </script>
</head>
<body>
 

    </div>
</body>
</html>

延時頭像框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{float: left; margin: 10px}
#div1 {width: 50px;height: 50px;background: #ccc;}
#div2 {width: 250px;height: 250px;background: red;display: none;}
</style>
<script>
    window.onload=function()
    {        
        oDiv1=document.getElementById('div1');
        oDiv2=document.getElementById('div2');
        var timer=null;
        //滑鼠移入div1顯示div2
        oDiv1.onmousemove=function()
        {
            clearTimeout(timer);
            oDiv2.style.display='block';
        }
        //移除div1時 1S後div2不顯示
        oDiv1.onmouseout =function()
        {
            timer= setTimeout(function()
            {
                oDiv2.style.display='none'
                } ,1000);
                        
        }
        //滑鼠移入div2時div1延時程式碼失效
        oDiv2.onmousemove=function()
        {
            clearTimeout(timer);
        }
        //移除div2時 1S後div2不顯示
        oDiv2.onmouseout=function()
        {
            timer=setTimeout(function()
            {
                oDiv2.style.display='none'
                },1000)
            
        }
    }
</script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>    
</body>
</html>

合併

<script>
    window.onload=function()
    {        
        oDiv1=document.getElementById('div1');
        oDiv2=document.getElementById('div2');
        var timer=null;
        //滑鼠移入div1顯示div2
        oDiv2.onmousemove=oDiv1.onmousemove=function()
        {
            clearTimeout(timer);
            oDiv2.style.display='block';
        }
        //移除div1時 1S後div2不顯示
        oDiv2.onmouseout=oDiv1.onmouseout =function()
        {
            timer= setTimeout(function()
            {
                oDiv2.style.display='none'
                } ,1000);
                        
        }
    }
</script>

相關文章