簡單粗暴的JavaScript筆記-1

阿新 • • 發佈：2018-12-05

標題圖

歡迎到我的簡書檢視我的文集

前言:

提示密碼提示框

<head>
<style>
#div1 {width: 100px;height:50px;background:#FFCC99;border:1px solid #FF9900; dispaly: none;}
</style>
<title>dashucoding</title>
</head>
<body>
// get Element By Id
<input type="checkbox" onmouseover="" "doucument.getElementById('div1').style.dispaly='block';" onmouseout="document.getElementById('div1').style.display='none'; "/>自動登入
<div id="div1" " >
 達叔小生
</div>
</body>

<label>標籤是用來分組

<label onmouseover="" "doucument.getElementById('div1').style.dispaly='block';" onmouseout="document.getElementById('div1').style.display='none';>登入</label>
<div id="div1">
 不要在網咖上網
</div>

alert使用
元素獲取

// 元素的獲取
id
document.getElementById
// 屬性操作
obj.style.display = "block"
document.getElementById("div1").style.display="block"

<div id="div1" class="box"></div>

<style>
 div{width:100px; height:100px; background:red;}
 .box {width: 200px; height: 200px; background: green;}
</style>

<body>
<div id="div1 onmouseover="document.getElementById('div1').className="box"; " onmouseout="document.getElementById('div1').className="box";">
</div>
</body>

換膚

換css樣式表,調好相容,改變href的值

<link id="link1" href="css1.css" rel="stylesheet" type="text/css" >

<input id="btn1" type="button" value="面板1" onclick="document.getElementById('link1').href='css1.css';" />
<input id="btn2" type="button" value="面板2" onclick="document.getElementById('link1').href='css2.css';" />

#idv1 {width:100px; height:100px; background:red;}
<div id="div1" onmouseover="document.getElementById("div1").style.width="200px" ;
onmouseover="document.getElementById("div1").style.height="200px" ;
">

<div id="div1" onmouseover="toRead()" onmouseout="toRes()">
</div>

getElementsByTagName
this
if
for

下拉列表

<div id="box">
    <p id="btn">輸入法</p>
    <ul id="ul1" style="display:block;">
        <li><a href="#">手寫</a></li>
        <li><a href="#">拼音</a></li>
        <li><a href="#">關閉</a></li>
    </ul>
</div>

<script type="text/javascript">
window.onload=function ()
{
    var oP=document.getElementById('btn');
    var oUl=document.getElementById('ul1');
    oP.onclick=function ()
    {
        if(oUl.style.display=='block')
        {
            oUl.style.display='none';
        }
        else    //none
        {
            oUl.style.display='block';
        }
    };
};
</script>

全選

<p id="btn">全選</p>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>

var aInput=document.getElementsByTagName("input");
aInput.length
aInput[0].checked=true;

for(i=0; i<5; i++){
 alert('dashucoding');
}

獲取

控制checkbox的狀態為checked
獲取一組元素為getElementsByTagName

for迴圈

重複執行操作
for迴圈的執行順序

<style>
 div{width: 100px; height: 100px; border: 1px solid black; }
</style>
<script type="text/javascript">
window.onload=function(){
 var aDiv = document.getElementsByTagName("div");
 var i=0;
 for(i=0;i<aDiv.length;i++){
  aDiv[i].style.background="red";
 }
}
</script>
<body>
 <div></div>
 <div></div>
</body>

全選

var i=0;
oBtn.onclick = function(){
 for(i=0;i<aInput.length;i++){
  aInput[i].checked=true;
 }
}

響應按鈕

<script type="text/javascript>
 window.onload=function(){
  var aBtn = document.getElementsByTagName('input');
  var i = 0;
  for(i=0; i<aBtn.length; i++){
   aBtn[i].onclick=function(){
    alert('dashucoding');
   }
  }
 }
</script>
<body>
<input type="button" value="達叔"/>
<input type="button" value="達叔小生"/>
<input type="button" value="dashucoding"/>
</body>

for(i=0;i<aBtn.length;i++){
 aBtn[i].onclick=functiion(){
  alert(this.value);
 };
}

選項卡(tab標籤)

改變class
改變style.dispaly
className為空
className為active
div的display為none
當前的div的display為block

<div id = "tab">
 <div class="nav">
  <ul>
   <li class="active">1</li>
   <li>2</li>
   <li>3</li>
  </ul>
  <a class="more" href="dashucoding">
 </div>
</div>

<div class="content">
 <div class="box" style="display: block;">
 </div>
 <div class="box">
 </div>
 <div class="box">
 </div>
</div>

# tab .box {width: 400px; padding: 20px; overflow: hidden; display: none;}

選項卡

<style>
input{background: white;}
.active{background: yellow;}
div{width:200px; height:200px; background:#ccc; display:none;}
</style>

<input class="active" type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>

<div style="display:block;">a</div>
<div>b</div>
<div>c</div>

<script type="text/javascript">
window.onload=function(){
 var aBtn = document.getElementsByTagName("input"); 
 var aDiv = document.getElementsByTagName("div"); 
 var i=0;
 for(i=0;i<aBtn.length;i++){
  aBtn[i].index=i;
  aBtn[i].onclick=function(){
   for(i=0;i<aBtn.length;i++){
    aBtn[i].className=' ';
    aDiv[i].style.dispaly="none";
   }
   alert('當前' + this.index);
   aDiv[this.index].style.display="block";
   this.className="active";
  };
 }
}
</script>

事件提取,getElementsByTagName,this
導航選單,自定義單選框用js, 評分, 收縮選單

<script type="text/javascript">
window.onload=function()
{
 var oBtn=document.getElementById('btn1');
 var oTxt=document.getElementById('txt1');
 var oDiv=document.getElementById('div1');
 oBtn.onclick=function()
 {
   oDiv.innerHTML=oTxt.value;
 };
}
</script>
<style>
 #div1{width:200px; height:200px; background:#ccc;}
</style>

<body>
<input type="text"/>
<input type="button" value="設定文字"/>
<div id="div1">
</div>
</body>

<div class="text">
 <h2>活動</h2>
 <p></p>
</div>

<script type="text/javascript">
window.onload=function()
{
 var aLi=document.getElementsByTagName('li');
 var oTxt=document.getElementsById("tab").getElementsByTagName("div")[0];
 var i=0;
 for(i=0; i<aLi.length; i++)
 {
   aLi[i].index=i;
   aLi[i].onmouseover = function()
   { 
     for(i=0;i<aLi.length;i++)
     {
        aLi[i].className=" ";
      }
      this.className="active";
      oTxt.innerHTML=this.index;
    }
  }
}
</script>

js
window.onload=function ()
{
    var oDiv=document.getElementById('tab');
    var aLiBtn=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');
    var i=0;
    
    for(i=0;i<aLiBtn.length;i++)
    {
        aLiBtn[i].onmouseover=select;
    }
};

定時器

setInterval間隔型
setTimeout 延時型
clearInterval
clearTimeout

<script type="text/javascript">
function show()
{
alert("dashu");
}
// setInterval(show, 1000);
window.onload=function()
{
 var oBtn1=document.getElementById("btn1");
 var oBtn2=document.getElementById("btn2");
 var timer = null;
 oBtn1.onclick=function()
 {
   timer=setInterval(show, 1000);
  }
  oBtn2.onclick=function()
 {
   clearInterval(timer);
  }
}
</script>

<input id="btn1" type="button" value="開啟"/>
<input id="btn2" type="button" value="暫停"/>

獲取時間

Date物件
getHours, getMinutes, getSeconds

<script type="text/javascript">
window.onload=function()
{
 var oDate = new Date();
 alert(oDate.getHours());
 alert(oDate.getMinutes());
 alert(oDate.getSeconds());
};
</script>

innerHTML
陣列
定時器
Date物件

換樣式

<link id="link1" href="css1.css" rel="stylesheet" type="text/css"/>
<dl id="message">
    <form>
        <dt>
            <strong>換樣式：</strong>
            <input id="btn1" type="button" value="面板1" onclick="document.getElementById('link1').href='css1.css';" />
            <input id="btn2" type="button" value="面板2" onclick="document.getElementById('link1').href='css2.css';" />
        </dt>
        <dd>輸入姓名：<input class="text" type="text" /></dd>
        <dd>輸入密碼：<input class="text" type="password" /></dd>
        <dd>請您留言：<textarea></textarea></dd>
        <dd class="center"><input class="btn" type="submit" value="提交" /></dd>
    </form>
</dl>

選單下拉列表

<link href="123.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="123.js">
</script>

<div id="drop" class="down_list">
    <h2 class="up">播放列表</h2>
    <ul>
        <li><a href="#">玩愛之徒 </a></li>
        <li><a href="#">原諒我就是這樣的女生</a></li>
        <li><a href="#">猜不透</a></li>
        <li><a href="#">自導自演 </a></li>
        <li><a href="#">浪漫窩 </a></li>
        <li><a href="#">流年</a></li>
    </ul>
</div>

window.onload=function ()
{
    var oDiv=document.getElementById('drop');
    var oH2=oDiv.getElementsByTagName('h2')[0];
    var oUl=oDiv.getElementsByTagName('ul')[0];
    
    oH2.onclick=showHideUl;
}

function showHideUl()
{
    var oDiv=document.getElementById('drop');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var oH2=oDiv.getElementsByTagName('h2')[0];
    
    if(oUl.style.display === 'none')
    {
        oUl.style.display='block';
        oH2.className='up';
    }
    else
    {
        oUl.style.display='none';
        oH2.className='down';
    }
}

<div id="box">
    <p id="btn">輸入法</p>
    <ul id="ul1" style="display:block;">
        <li><a href="#">手寫</a></li>
        <li><a href="#">拼音</a></li>
        <li><a href="#">關閉</a></li>
    </ul>
</div>

<script type="text/javascript">
window.onload=function ()
{
    var oP=document.getElementById('btn');
    var oUl=document.getElementById('ul1');
    
    oP.onclick=function ()
    {
        if(oUl.style.display=='block')
        {
            oUl.style.display='none';
        }
        else    //none
        {
            oUl.style.display='block';
        }
    };
};
</script>

改變Div的樣式

<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()">
</div>
</body>

<script type="text/javascript">
function toGreen()
{
    var oDiv1=document.getElementById('div1');
    
    oDiv1.style.width='200px';
    oDiv1.style.height='200px';
    oDiv1.style.background='green';
}

function toRed()
{
    var oDiv1=document.getElementById('div1');
    
    oDiv1.style.width='100px';
    oDiv1.style.height='100px';
    oDiv1.style.background='red';
}
</script>

選項卡

<body>

<div id="tab">
    
    <div class="nav">
        <ul>
            <li class="active"><a href="#">達叔小生1</a></li>
            <li><a href="#">達叔小生2</a></li>
            <li><a href="#">達叔小生3</a></li>
        </ul>
        <a class="more" href="https://www.jianshu.com/u/c785ece603d1">>>更多</a>
    </div>
    <div class="content">
        <div class="box" style="display:block;">
            <div class="pic"><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/1.jpg" alt="達叔小生" /></a></div>
            <ul class="pic_list">
                
            </ul>
        </div>
        <div class="box">
            <div class="pic"><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/2.jpg" alt="達叔小生1" /></a></div>
            <ul class="pic_list">
                
            </ul>
        </div>
        <div class="box">
            <div class="pic"><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/3.jpg" alt="達叔小生2" /></a></div>
            <ul class="pic_list">
                
            </ul>
        </div>
    </div>
    
    <div class="adorn1"></div>
    <div class="adorn2"></div>
    
</div>

</body>

// js
<script type="text/javascript">
window.onload=function()
{
    var oTab=document.getElementById('tab');
    var aLi=getByClass(oTab, 'nav')[0].getElementsByTagName('li');
    var aA=oTab.getElementsByTagName('ul')[0].getElementsByTagName('a');
    var aDiv=getByClass(oTab, 'box');
    var i=0;
    
    aDiv[0].style.display='block';
    
    for(i=0; i<aLi.length; i++)
    {
        aLi[i].index=i;
        aLi[i].onclick=function()
        {
            for(i=0; i<aLi.length; i++)
            {
                aLi[i].className='';
                aDiv[i].style.display='none';
            }
            this.className='active';
            aDiv[this.index].style.display='block';
        };
        aA[i].onfocus=function(){this.blur();};
    }
};
function getByClass(oParent, sClassName)
{
    var aElm=oParent.getElementsByTagName('*');
    var aArr=[];
    for(var i=0; i<aElm.length; i++)
    {
        if(aElm[i].className==sClassName)
        {
            aArr.push(aElm[i]);
        }
    }
    return aArr;
}
</script>

淘寶商品列表

// html
<table id="taobao_table">
    <thead>
        <tr>
            <th><label><input type="checkbox" /> 全選</label></th>
            <th>商品名</th>
            <th width="70"><a class="btn" href="#">價格</a></th>
            <th width="70"><a class="btn" href="#">地區</a></th>
            <th>功能</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            
        </tr>
        <tr>
            
        </tr>
        <tr>
            
        </tr>
       
    </tbody>
    <tfoot>
        <tr>
            <th colspan="5"></th>
        </tr>
    </tfoot>
</table>

// js
window.onload=function ()
{
    var oTable=document.getElementById('taobao_table');
    var oBtnSelectAll=oTable.getElementsByTagName('input')[0];
    var aInputs=oTable.getElementsByTagName('input');
    var aRows=oTable.tBodies[0].rows;
    var oBtnPrice=oTable.tHead.getElementsByTagName('a')[0];
    var oBtnArea=oTable.tHead.getElementsByTagName('a')[1];
    var i=0;
    
    //隔行變色
    interlaceColor();
    
    //加事件
    for(i=0;i<aInputs.length;i++)
    {
        if(aInputs[i].type=='button' && aInputs[i].value=='刪除')
        {
            aInputs[i].onclick=doDelete;
        }
        
        if(aInputs[i].type=='checkbox' && aInputs[i]!=oBtnSelectAll)
        {
            aInputs[i].onclick=calcTotalPrice;
        }
    }
    
    oBtnSelectAll.onclick=function ()
    {
        selectAll();
        calcTotalPrice();
    }
    
    oBtnPrice.href="javascript:void(0);";
    oBtnPrice.order='none';
    oBtnPrice.onclick=sortByPrice;
    
    oBtnArea.href="javascript:void(0);";
    oBtnArea.order='none';
    oBtnArea.onclick=sortByArea;
};

function selectAll()
{
    var oTable=document.getElementById('taobao_table');
    var oBtnSelectAll=oTable.getElementsByTagName('input')[0];
    var aInputs=oTable.tBodies[0].getElementsByTagName('input');
    
    var i=0;
    
    for(i=0;i<aInputs.length;i++)
    {
        if(aInputs[i].type=='checkbox')
        {
            aInputs[i].checked=oBtnSelectAll.checked;
        }
    }
}

展開選單

<ul id="nav">
    <li><a onclick="leo(0)" href="#" class="navLink"><img src="nav.gif" class="img" />達叔小生</a></li>
    <ul id="m0" class="menu">
        <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />達叔小生</a></li>
        
    </ul>
    <li><a onclick="leo(1)" href="#" class="navLink"><img src="nav.gif" class="img" />達叔小生</a></li>
    <ul id="m1" class="menu">
        <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />達叔小生</a></li>
        
    </ul>
    <li><a onclick="leo(2)" href="#" class="navLink"><img src="nav.gif" class="img" />達叔小生</a></li>
    <ul id="m2" class="menu">
        <li><a href="#" class="menuLink"><img src="nav2.gif" class="img2" />達叔小生</a></li>
        
    </ul>
   
</ul>

// js
<script type="text/ecmascript">

function leo(n){
    var navUi = document.getElementById("m"+n);
    if(navUi.style.display != "block"){
        for(var i=0;i<=5;i++){
            document.getElementById("m"+i).style.display = "none";
        }
        navUi.style.display = "block";
    }else{
        navUi.style.display = "none";
    }
}
</script>

點贊小星星

<body>
<div id="dianzan">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>

// js
window.onload=function(){
    var oPf=document.getElementById('dianzan');
    var aLi=oPf.getElementsByTagName('li');
    var i=0;
    
    for(i=0;i<aLi.length;i++){
        aLi[i].index=i;
        aLi[i].onmouseover=function(){
            for(i=0;i<aLi.length;i++){
                if(i<=this.index)
                {
                    aLi[i].style.background="url(star.gif) no-repeat 0 -29px";
                }
                else
                {
                    aLi[i].style.background="url(star.gif) no-repeat 0 0";
                }
            }
        };
        
        aLi[i].onmousedown=function ()
        {
            alert('提交成功:'+(this.index+1)+'分');
        };
    }
};

移動到QQ頭像展示資料

<style>
#div1 {width: 200px; height: 30px; background: red;}
#div2 {width: 150px; height: 20px; background: yellow; margin: 10px; dispaly: none;}
</style>

<script type="text/javascript">
window.onload=function()
{
 var oDiv1=document.getElementById('div1');
 var oDiv2=document.getElementById('div2');
 var timer = null;
 
 oDiv1.onmouseover = function()
 {
   oDiv2.style.display="block';
   clearTimeout(timer);
  };
 oDiv1.onmouseout = function()
 {
   timer=setTimeout(function(){
   oDiv2.style.display="none';
  }, 300);
 };
 oDiv2.onmouseover = function()
 {
  clearTimeout(timer);
 };
 oDiv2.onmouseout = function()
 {
  timer=setTimeout(function(){
  oDiv2.style.display='none';
  }, 300);
 };
};
<script>

<div id="div1">
</div>
<div id="div2">
</div>

<script type="text/javascript">
 function show()
{  
 oDiv2.style.display="block";
 clearTimeout(timer);
 }
 function hide()
 {
  timer = setTimeout(function(){
   oDiv2.style.display="none";
  }, 300);
 }
 oDiv1.onmouseover = show;
 oDiv2.onmouseover = show;
 oDiv1.onmouseout = hide;
 oDiv2.onmouseout = hide;
</script>

// ->
<script type="text/javascript">
var a;
var b;
a=b=1;
</script>

無縫滾動

<style>
#div1 {width:100px;height:100px;background:#ccc; positon: absolute; left:0; }
</style>

<script type="text/javascript">
window.onload=function()
{
 var oDiv = document.getElementById('div1');
 var oBtn1 = document.getElementById('btn1');
 var oBtn2 = document.getElementById('btn2');
 //
 oBtn1.onclick=function()
 {
  alert(oDiv.offsetLeft);
  oDiv.style.left = oDiv.offsetLeft + 5 + "px";
 };
  //
 var timer = null;
  oBtn1.onclick = function()
 {
  timer = setInterval(function(){
   oDiv.style.left=oDiv.offsetLeft + 5 +"px";
   }, 30);
 };
 oBtn2.onclick = function()
 {
  clearInterval(timer);
 };
};
</script>

<input type="button1" value="向右移動" id="btn1"/>
<input type="button2" value="停止移動" id="btn2"/>
<div id="div1">
</div>

簡約日曆

<div id="tab" class="calendar">

    <ul>
        <li class="active"><h2>1</h2><p>JAN</p></li>
        <li><h2>2</h2><p>FER</p></li>
        <li><h2>3</h2><p>MAR</p></li>
        <li><h2>4</h2><p>APR</p></li>
        <li><h2>5</h2><p>MAY</p></li>
        <li><h2>6</h2><p>JUN</p></li>
        <li><h2>7</h2><p>JUL</p></li>
        <li><h2>8</h2><p>AUG</p></li>
        <li><h2>9</h2><p>SEP</p></li>
        <li><h2>10</h2><p>OCT</p></li>
        <li><h2>11</h2><p>NOV</p></li>
        <li><h2>12</h2><p>DEC</p></li>
    </ul>
    
    <div class="text">
        <h2>1月</h2>
        <p>快過年了～</p>
    </div>

</div>

window.onload=function ()
{
    var oDiv=document.getElementById('tab');
    var aLiBtn=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');
    var i=0;
    
    for(i=0;i<aLiBtn.length;i++)
    {
        aLiBtn[i].onmouseover=select;
    }
};

function select()
{
    var oDiv=document.getElementById('tab');
    var aLiBtn=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');
    var oDivContent=oDiv.getElementsByTagName('div')[0];
    var sInnterHtml='';
    var i=0;
    
    for(i=0;i<aLiBtn.length;i++)
    {
        aLiBtn[i].className='';
    }
    
    for(i=0;i<aLiBtn.length;i++)
    {
        if(aLiBtn[i] === this)
        {
            aLiBtn[i].className='active';
            sInnterHtml="<h2>" + (i+1) + "月活動</h2>";
            sInnterHtml+="<p>" + aInnerText[i] + "</p>";
            oDivContent.innerHTML=sInnterHtml;
        }
    }
}

圖片滾屏效果

<body>
<div class="control">
    <label id="chk_pause"><input type="checkbox" checked="checked">間隔停頓</label>
    <select id="pause_time">
        <option value="100">短</option>
        <option value="1000" selected="selected">中</option>
        <option value="3000">長</option>
    </select>

    滾動速度：
    <select id="sel_speed">
        <option value="2">慢</option>
        <option value="5">中</option>
        <option value="10">快</option>
    </select>
</div>

<div class="roll" id="roll">
    <a href="javascript:void(0);" class="btn_left"></a>
    <a href="javascript:void(0);" class="btn_right"></a>
    <div class="wrap">
        <ul>
            <li><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/1.jpg" /></a></li>
            <li><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/2.jpg" /></a></li>
            <li><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/3.jpg" /></a></li>
            <li><a href="https://www.jianshu.com/u/c785ece603d1"><img src="images/4.jpg" /></a></li>
        </ul>
    </div>
</div>
</body>

// js
var g_bMoveLeft=true;
var g_oTimer=null;
var g_oTimerOut=null;

var g_bPause=true;
var g_iPauseTime=1000;
var g_iSpeed=2;

window.onload=function ()
{
    var oDiv=document.getElementById('roll');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    var aA=oDiv.getElementsByTagName('a');
    
    var oChk=document.getElementById('chk_pause');
    var oPauseTime=document.getElementById('pause_time');
    var oSpeed=document.getElementById('sel_speed');
    
    var i=0;
    
    var str=oUl.innerHTML+oUl.innerHTML;
    
    oUl.innerHTML=str;
    
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
    
    for(i=0;i<aLi.length;i++)
    {
        aLi[i].onmouseover=function ()
        {
            stopMove();
        };
        
        aLi[i].onmouseout=function ()
        {
            startMove(g_bMoveLeft);
        };
    }
    
    aA[0].onmouseover=function ()
    {
        startMove(true);
    };
    
    aA[1].onmouseover=function ()
    {
        startMove(false);
    };
    
    startMove(true);
    
    oChk.onclick=function ()
    {
        g_bPause=oChk.getElementsByTagName('input')[0].checked;
    };
    
    oSpeed.onchange=function ()
    {
        g_iSpeed=parseInt(this.value);
    };
    
    oPauseTime.onchange=function ()
    {
        g_iPauseTime=parseInt(this.value);
    };
};

function startMove(bLeft)
{
    g_bMoveLeft=bLeft;
    
    if(g_oTimer)
    {
        clearInterval(g_oTimer);
    }
    g_oTimer=setInterval(doMove, 30);
}

function stopMove()
{
    clearInterval(g_oTimer);
    g_oTimer=null;
}

function doMove()
{
    var oDiv=document.getElementById('roll');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    
    var l=oUl.offsetLeft;
    
    if(g_bMoveLeft)
    {
        l-=g_iSpeed;
        if(l<=-oUl.offsetWidth/2)
        {
            l+=oUl.offsetWidth/2;
        }
    }
    else
    {
        l+=g_iSpeed;
        if(l>=0)
        {
            l-=oUl.offsetWidth/2;
        }
    }
    
    if(g_bPause)
    {
        if(Math.abs(l-Math.round(l/aLi[0].offsetWidth)*aLi[0].offsetWidth)<Math.ceil(g_iSpeed/2))
        {
            stopMove();
            g_oTimerOut=setTimeout
            (
                function ()
                {
                    startMove(g_bMoveLeft);
                }, g_iPauseTime
            );
            
            l=Math.round(l/aLi[0].offsetWidth)*aLi[0].offsetWidth;
        }
    }
    
    oUl.style.left=l+'px';
}

達叔小生：往後餘生，唯獨有你
You and me, we are family !
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通
簡書部落格：達叔小生
https://www.jianshu.com/u/c785ece603d1

結語

下面我將繼續對其他知識深入講解，有興趣可以繼續關注
小禮物走一走 or 點贊

簡單粗暴的JavaScript筆記-1

歡迎到我的簡書檢視我的文集前言: 提示密碼提示框 <head> <style> #div1 {width: 100px;height:50px;background:#FFCC99;border:1px solid #FF9900; dispaly: n

JavaScript筆記1

switch parse second 輸入框分享 ima ner fin 所在一.概述 JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，

javaScript筆記-----1

彈出輸入框：prompt() 獲取輸入值彈出提示框：alert（）日誌：console.log() 隨機數：Math.random() 函式：function 函式如果沒有return則返回undefined 在函式中申明的變數為區域性變數，在函式外申明的為

Ajax與Comet-JavaScript高級程序設計第21章讀書筆記(1)

set activex .html 規範 sta php 協議 num 刷新 Ajax(Asynchronous Javascript + XML)技術的核心是XMLHttpRequest對象,即: XHR。雖然名字中包含XML，但它所指的僅僅是這種無須刷新頁面即可從服務器

設計模式筆記1：簡單工廠模式

1.3 簡單修改作用面向對象對象面向 tro 計算　　如果想成為一名更優秀的軟件設計師，了解優秀軟件設計的演變過程比學習優秀設計本身更有價值。 1.1 面向對象的好處　　通過封裝、繼承多態把程序的耦合度降低，使用設計模式使得程序更加靈活，容易修改，易於復用

你不知道的JavaScript學習筆記1——作用域

模式引用語法分析訪問要素並不會參數嵌套 ron 處理程序三要素：引擎：編譯與執行過程。編譯器：語法分析與代碼生成等。作用域：收集並維護由所有聲明的標識符（變量）組成的一系列查詢，並實施一套非常嚴格的規則，確定當前執行的代碼對這些標識符的訪問權限。示

javascript學習筆記1

per 選擇 src bsp rop 語句 conf log 一個　　一.JavaScript介紹　　JavaScript又被稱為js，主要負責瀏覽器的動畫等效果.現在一般瀏覽器都兼容js（IE6.7.8可能不兼容某些用法）。　　二.JS常用語句　　1.docume

Python學習筆記1：簡單實現ssh客戶端和服務端

bsp dev bre 客戶端 break 基於 bin listen 客戶實現基於python 3.6。 server端： 1 __author__ = "PyDev2018" 2 3 import socket,os 4 server = socket.s

JavaScript筆記 #06# Promise簡單例子

scrip evel promise customer xxx rom pro 對象 turn 索引回調版本 Promise版本1 Promise版本2 Notes 參考資料： Promise JavaScript Promise：簡介

Python3學習筆記1：變量和簡單數據類型

tle 小數點 per port 小數指導 day this python 2018-09-16 17:22:11 變量聲明：　　變量名 = ？？如： 1 message = "HelloWorld" 2 message = 1 3 message =

javaweb學習筆記（八）：JavaScript（1）

目錄 1.javascript 1.1 js的引入方式 1.2 ECMAScript基礎 1.2.1語法 1.2.2資料型別 1.2.3 運算子 1.3 ECMA物件 1.3.1 Function物件 1.3.2Number物件 1.3.3 String物

JavaScript教程筆記(1)-資料型別

JavaScript共有6種資料型別，分別是：數值 (number)：整數和小數。字串 (string)：文字。布林值 (boolean)：true 和 false。 undefined：表示“未定義”或“不存在”。 null：表示空值。

tensorflow學習筆記1:影象資料的一些簡單操作

博主學習TensorFlow不久，學習路上也是遇到不少問題。所以決定寫一個系列的學習筆記，算是記錄下學習歷程，方便以後翻閱。當然如果可以幫助到一些新手的話就更好了，高手請繞道。 1.影象資料的採集: &nbs

筆記1-------JavaScript輸出

JavaScript沒有任何列印或輸出的函式； JavaScript通過以下方式輸出顯示：方法一：使用window.alert()彈出警告框; 方法二：使用document.write()方法將內容寫入到HTML文件中; 方法三：使用innerHTML寫入到HTML元素；方法

Sigmaplot學習筆記1——製作最簡單的柱狀圖

什麼！居然是英文版。。。然而搞科學研究不懂英文怎麼行呢？製作最簡單的柱狀圖開啟Sigmaplot14，建立空白資料表，點選OK 將資料複製或者輸入到表格中，不用管此時資料後面的4位小數，製圖時，年份後小數自動消失點選簡單垂直柱狀圖

Web應用的建立筆記(1)_建立一個簡單的前後端+資料庫的WEB應用

最近轉到了研發部門，作為Product Owner，需要了解一下現在開發企業級應用的一些相關技術，為此把學習的成果記錄下來，也希望有需要的朋友可以作為參考。這個學習成果將會通過一系列的部落格來記錄下來。我的想法是，實現一個比較全面的WEB應用，這個應用將搭建在AZURE雲平臺

簡單脫殼教程筆記(1) --- 常見語言的入口點

殼的分類：壓縮殼、加密殼壓縮的目的是減少程式體積，如ASPack、UPX、PECompact等。加密是為了防止程式被跟蹤和除錯，如ASProtect、幻影

（概述）JavaScript權威指南筆記1

定義和描述 Javascript是一種具有面向物件的、解釋型的程式設計語言。 Javascript是一種鬆散型型別語言，即變數不必具有一個明確的型別。 Javascript中的物件把屬性名對映為任意的屬性值。 Javascript中的OO繼承機制基於原型

Spring Boot學習筆記1——搭建一個簡單的Spring Boot專案

1.建立一個Maven專案匯入相應的依賴 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocatio

ITK學習筆記1：從一個簡單的例子出發學習ITK

看完東靈的vtk的相關教程，接下來就是對itk的學習了。不過網上itk的學習資源還是零零散散的，還是需要自己進行整合。專案地址： Alxemade/ITKLearning 1. 參考資源 CSDN: ljp1919的專欄-ITK學習筆記 CSDN:

簡單粗暴的JavaScript筆記-1

前言:

結語

相關推薦