简单粗暴的JavaScript笔记-1-白红宇

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

前言:

提示密码提示框

dashucoding// get Element By Id自动登录
    
      达叔小生
    
复制代码

标签是用来分组 不要在网吧上网复制代码

alert使用元素获取

// 元素的获取iddocument.getElementById// 属性操作obj.style.display = "block"document.getElementById("div1").style.display="block"复制代码


    
复制代码


    
复制代码

换肤

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


    复制代码

#idv1 {width:100px; height:100px; background:red;}
    
     复制代码


    
复制代码

getElementsByTagName this if for

下拉列表

复制代码

全选

全选
var aInput=document.getElementsByTagName("input");aInput.lengthaInput[0].checked=true;复制代码

for(i=0; i<5; i++){ alert('dashucoding');}复制代码

获取

控制checkbox的状态为checked

获取一组元素为getElementsByTagName

for循环

重复执行操作

for循环的执行顺序

 
    
 
    
复制代码

全选

var i=0;oBtn.onclick = function(){ for(i=0;i

响应按钮

复制代码

for(i=0;i

选项卡(tab标签)

改变class

改变style.dispaly

className为空

className为active

div的display为none

当前的div的display为block

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

选项卡

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


    
复制代码

jswindow.onload=function (){	var oDiv=document.getElementById('tab');	var aLiBtn=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');	var i=0;		for(i=0;i

定时器

setInterval间隔型

setTimeout 延时型

clearInterval

clearTimeout

复制代码

获取时间

Date对象getHours, getMinutes, getSeconds复制代码

复制代码

innerHTML 数组定时器 Date对象

换样式

菜单下拉列表

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的样式


    
复制代码

选项卡

淘宝商品列表

// html
    
                                           全选                    商品名                    价格                    地区                    功能               
         
                                                 
                                        
                                        
                
             	              	                     
             
// jswindow.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

展开菜单

点赞小星星


    	
         	
      
        
      
        
      
        
      
        
      
    
     
    
// jswindow.onload=function(){	var oPf=document.getElementById('dianzan');	var aLi=oPf.getElementsByTagName('li');	var i=0;		for(i=0;i

移动到QQ头像展示资料

// ->复制代码

无缝滚动


    
复制代码

简约日历

window.onload=function (){	var oDiv=document.getElementById('tab');	var aLiBtn=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');	var i=0;		for(i=0;i
    
     ";			sInnterHtml+="
     " + aInnerText[i] + "
";			oDivContent.innerHTML=sInnterHtml;		}	}}复制代码

图片滚屏效果

// jsvar 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
    
     =0)		{			l-=oUl.offsetWidth/2;		}	}		if(g_bPause)	{		if(Math.abs(l-Math.round(l/aLi[0].offsetWidth)*aLi[0].offsetWidth)

达叔小生：往后余生，唯独有你 You and me, we are family ! 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通简书博客：达叔小生

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注

小礼物走一走 or 点赞

前言:

活动

播放列表

1

2

3

4

5

6

7

8

9

10

11

12

1月

结语