周期 关闭 延时 关闭 parseInt isNaN

setInterval 周期 clearInterval 关闭

无缝滚动

<style>
ul{ list-style:none;}
*{padding:0;margin:0;}
#div1{position:relative;width:700px;height:200px;margin:100px auto;border:1px solid red;}
#div1 ul{position:absolute;left:0;top:0;}
#div1 ul li{width:200px;height:100px;border:1px solid red;float:left;}
</style>
<script>
window.onload=function()
{
    var oDiv=document.getElementById('div1');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var oLi=oUl.getElementsByTagName('li');
    var timer=null;
    var oBtn0=document.getElementById('input0');
    var oBtn1=document.getElementById('input1');
    var oBtn2=document.getElementById('input2');
    
    oUl.innerHTML+=oUl.innerHTML
    oUl.style.width=oLi.length*oLi[0].offsetWidth+'px';
    var speen =-3;
    
    timer=setInterval(show,20)
    function show()
    {
        oUl.style.left=oUl.offsetLeft+speen+'px';
        if(oUl.offsetLeft<-oUl.offsetWidth/2)
        {
            oUl.style.left='0px';
        }
        else if(oUl.offsetLeft>0)
        {
            oUl.style.left=-oUl.offsetWidth/2
        }
    }
    oUl.onmouseover=function()
    {
        clearInterval(timer)
    }
    oUl.onmouseout=function()
    {
        timer=setInterval(show,20)
    }
    oBtn1.onmouseover=function()
    {
        speen =-3;
    }
    oBtn2.onmouseover=function()
    {
        speen =1;
    }
}
</script>

<input type="button" id="input0" value="停止" />
<input type="button" id="input1" value="左边" />
<input type="button" id="input2" value="右边" />
<div id="div1">
    <ul>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

 

setTimeout 延时 clearTimeout 关闭

<style>
*{padding:0;margin:0;}
ul{ list-style:none;}
#nav{width:980px;height:30px; background:#999;}
    #nav li{float:left;width:100px;line-height:30px;text-align:center;margin-right:10px; cursor:pointer;}
    #nav li div{width:100px;height:100px;margin-top:10px; background:#0F3;display:none;}
</style>
<script type="text/javascript">
window.onload=function()
{
    var oDiv=document.getElementById('nav');
    var aLi=oDiv.getElementsByTagName('li');
    var aLa=oDiv.getElementsByTagName('a');
    var oDiva=oDiv.getElementsByTagName('div');
    var i=0;
    var timer=null;
    
    for(i=0;i<aLa.length;i++)
    {
        aLa[i].index=i;
        aLa[i].onmouseover=function()
        {
            for(i=0;i<aLa.length;i++)
            {
                oDiva[i].style.display='none';
            }
            oDiva[this.index].style.display='block';
            clearTimeout(timer)
        }
        aLa[i].onmouseout=function()
        {
            timer=setTimeout(function(){
                for(i=0;i<aLa.length;i++)
                {
                    oDiva[i].style.display='none';
                }
            },500)
        }
    }
    for(i=0;i<oDiva.length;i++)
    {
        oDiva[i].onmouseover=function()
        {
            clearTimeout(timer)
            this.style.display='block';
        }
        oDiva[i].onmouseout=function()
        {
            timer=setTimeout(function(){
                for(i=0;i<aLa.length;i++)
                {
                    oDiva[i].style.display='none';
                }},500)
        }
    }
    
    
}
</script>
<div id="nav">
<ul>
    <li>
        <a href="#">首页</a>
        <div></div>
    </li>
    <li>
        <a href="#">简介</a>
        <div></div>
    </li>
    <li>
        <a href="#">新闻</a>
        <div></div>
    </li>
    <li>
        <a href="#">产品</a>
        <div></div>
    </li>
</ul>
</div>

时间

<script>
function toDuble(mull)
{
    if(mull<10)
    {
        return '0'+mull
    }
    else
    {
        return ''+mull
    }
}
window.onload=function()
{
    var oBtn=document.getElementById('btn');
    var oSpan=document.getElementsByTagName('span');
    var i=0;
    
    function star()
    {
        var oDate=new Date()
        var str=toDuble(oDate.getHours())+toDuble(oDate.getMinutes())+toDuble(oDate.getSeconds())
        for(i=0;i<oSpan.length;i++)
        {
            oSpan[i].innerHTML=str.charAt(i)
        }
    }
    setInterval(star,1000)
    star()
}

</script>
<span>0</span><span>0</span>：<span>0</span><span>0</span>：<span>0</span><span>0</span>

 parseInt  isNaN 转换

<script>

window.onload=function()
{
    var oText1=document.getElementById('text1');
    var oText2=document.getElementById('text2');
    var oBtn=document.getElementById('btn');
    
    oBtn.onclick=function()
    {
        var num=parseInt(oText1.value)+parseInt(oText2.value)
        if(isNaN(num))
        {
            alert('输入错误')
        }
        else
        {
            alert(num)
        }
    }
}
</script>
<input type="text" id="text1" />
<input type="text" id="text2" />
<input type="button" id="btn" value="求和" />