简单粗暴的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 点赞
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!