zoukankan      html  css  js  c++  java

  • 简单粗暴的JavaScript笔记-1

    标题图

    欢迎到我的简书查看我的文集

    前言:

    提示密码提示框

    <head>
<style>
#div1 { 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{100px; height:100px; background:red;}
 .box { 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 {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');
}

    获取

    1. 控制checkbox的状态为checked
    2. 获取一组元素为getElementsByTagName

    for循环

    1. 重复执行操作
    2. for循环的执行顺序
    <style>
 div{ 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标签)

    1. 改变class
    2. 改变style.dispaly
    3. className为空
    4. className为active
    5. div的display为none
    6. 当前的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 { 400px; padding: 20px; overflow: hidden; display: none;}

    选项卡

    <style>
input{background: white;}
.active{background: yellow;}
div{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{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;
	}
};

    定时器

    1. setInterval间隔型
    2. setTimeout 延时型
    3. clearInterval
    4. 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 { 200px; height: 30px; background: red;}
#div2 { 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 {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 点赞
  • 相关阅读:
    读《暗时间》
    文献笔记8
    文献笔记4
    文献笔记2
    文献笔记5
    文献笔记6
    文献笔记1
    文献笔记3
    读《暗时间》2
    文献笔记7
  • 原文地址：https://www.cnblogs.com/dashucoding/p/10068857.html
Copyright © 2011-2022 走看看