简单粗暴的JavaScript笔记-1

以你之姓@ 2021-09-17 04:16 260阅读 0赞

![标题图][1240]

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

## 前言: ##

> 提示密码提示框

<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>

> 换肤

> 换css样式表,调好兼容,改变`href`的值

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

> `getElementsByTagName`  
> `this`  
> `if`  
> `for`

> 下拉列表

> 全选

<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循环的执行顺序

> 全选

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

> 响应按钮

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

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

> 选项卡

> 事件提取,getElementsByTagName,this  
> 导航菜单,自定义单选框用js, 评分, 收缩菜单

<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

> 获取时间

Date对象
    getHours, getMinutes, getSeconds

> innerHTML  
> 数组  
> 定时器  
> Date对象

> 换样式

> 菜单下拉列表

<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头像展示资料

> 无缝滚动

> 简约日历

> 图片滚屏效果

// 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][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[1240]: /images/20210724/9578480c38ba4977afd54c752f667e33.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1