简单粗暴的JavaScript笔记-1
标签：
JavaScript
标题图
欢迎到我的简书查看我的文集
前言:
提示密码提示框
<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使用
元素获取
// 元素的获取iddocument.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" ="document.getElementById('link1').href='css1.css';" />
<input id="btn2" type="button" value="皮肤2" ="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>
getElementsByTagNamethisiffor
下拉列表
<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.=function (){ var oP=document.getElementById('btn'); var oUl=document.getElementById('ul1');
oP.=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.=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. = function(){ for(i=0;i<aInput.length;i++){
aInput[i].checked=true;
}
}响应按钮
<script type="text/javascript>
window.=function(){
var aBtn = document.getElementsByTagName('input');
var i = 0;
for(i=0; i<aBtn.length; i++){
aBtn[i].=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].=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.=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].=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.=function(){ var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var oDiv=document.getElementById('div1');
oBtn.=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.=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>jswindow.=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.=function(){ var oBtn1=document.getElementById("btn1"); var oBtn2=document.getElementById("btn2"); var timer = null;
oBtn1.=function() {
timer=setInterval(show, 1000);
}
oBtn2.=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.=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" ="document.getElementById('link1').href='css1.css';" />
<input id="btn2" type="button" value="皮肤2" ="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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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.=function (){ var oDiv=document.getElementById('drop'); var oH2=oDiv.getElementsByTagName('h2')[0]; var oUl=oDiv.getElementsByTagName('ul')[0];
oH2.=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.=function (){ var oP=document.getElementById('btn'); var oUl=document.getElementById('ul1');
oP.=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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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.=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].=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>
作者：达叔小生
链接：https://www.jianshu.com/p/d84e4a88dab5
x
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦