简单粗暴的JavaScript笔记-1

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

前言:

提示密码提示框

<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的更多相关文章

你可曾见过如此简单粗暴的JavaScript解说 -- if 判断的正确打开方式？
在JavaScript中,对于 if else 的逻辑判断你肯定非常熟悉,本文罗列了几种你不一定知道的简写方式,仅供参考. 例子: 已知小明考了68分,小于60分为不及格,大于60分为及格,问:小明是 ...
简单粗暴地理解 JavaScript 原型链（一个充满歪门邪理的理解方法，有助于新手哦！）
原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...
好文要顶之 --- 简单粗暴地理解 JavaScript 原型链
原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...
简单粗暴的对android so文件加壳，防止静态分析
转载自http://bbs.pediy.com/showthread.php?t=191649 以前一直对.so文件加载时解密不懂,不了解其工作原理和实现思路.最近翻看各种资料,有了一些思路.看到论坛 ...
[Effective JavaScript 笔记]第3章：使用函数--个人总结
前言这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...
[Effective JavaScript 笔记]第27条：使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...
[Effective JavaScript 笔记]第28条：不要信赖函数对象的toString方法
js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...
简单粗暴地理解js原型链--js面向对象编程
原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...
制作自己的MVC框架（一）——简单粗暴的实现
现在市面上有很多成熟的MVC框架,可以拿来直接用,但自己造一下轮子其实也挺有意思的. 下面先来看个最简单粗暴的MVC实现. 5个文件就能实现最简单的MVC,在Apache中设置一个虚拟目录,配置个简单 ...

随机推荐

checkinstall
一.简介 Linux 的源码安装工具 CheckInstall
10.Redis分布式集群
10.Redis分布式集群10.1 数据分布10.1.1 数据分布理论10.1.2 Redis数据分区10.1.3 集群功能限制10.2 搭建集群10.2.1 准备节点10.2.2 节点握手10.2. ...
maven学习--1.项目结构及简单使用
1.项目目录结构 MavenProjectRoot(项目根目录) |----src | |----main | | |----java ——存放项目的.ja ...
探索未知种族之osg类生物---渲染遍历之裁剪二
前言上一节我们大致上过了一遍sceneView::cull()函数,通过研究,我们发现上图中的这一部分的代码才是整个cull过程的核心部分.所以今天我们来仔细的研究一下这一部分. sceneView ...
《笨方法学Python》加分题33
while-leep 和我们接触过的 for-loop 类似,它们都会判断一个布尔表达式的真伪.也和 for 循环一样我们需要注意缩进,后续的练习会偏重这方面的练习.不同点在于 while 循环在执行 ...
node,Yeoman,Bower,Grunt的简介及安装
作为前端,基本的html,css,js已经不太够用了,所以要学习一些前端自动化工具,来提高我们的生产力 1.NodeJS 先安装NodeJS,直接去官网,下载最新的版本,一定要最新的版本,这样会避免很 ...
解决Chrome 70及以上版本的证书问题:Failed to load resource: net::ERR_CERT_SYMANTEC_LEGACY
1.桌面必须要有Chrome 快捷方式 2.进入快捷方式属性 3.修改目标为:"C:\Program Files (x86)\Google\Chrome\Application\chrome ...
Latex引用\ref
在等式/图/定理等后面加\label{name} 正文引用方法:等式使用 \eqref{name},非等式引用可使用\ref{name}.
mysql查询前一天的数据
curdate()表示当天日期统计前一天的日志sql语句: day); 要求: 统计从昨天开始统计前7天的日志包括昨天 day) --------------------- date_sub( ...
shell脚本学习-文件包含
跟着RUNOOB网站的教程学习的笔记和其他语言一样,shell也可以包含外部脚本.这样可以很方便的封装一些公用的代码作为一个独立的文件.shell文件包含的语法有两种形式 . filename # ...

简单粗暴的JavaScript笔记-1

前言:

结语

简单粗暴的JavaScript笔记-1的更多相关文章

随机推荐

热门专题