为了账号安全,请及时绑定邮箱和手机立即绑定

简单粗暴的JavaScript笔记-1

标签:
JavaScript

webp

标题图

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

前言:

提示密码提示框

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

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.=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');
}

获取

  1. 控制checkbox的状态为checked

  2. 获取一组元素为getElementsByTagName

for循环

  1. 重复执行操作

  2. 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标签)

  1. 改变class

  2. 改变style.dispaly

  3. className为空

  4. className为active

  5. div的display为none

  6. 当前的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;
    }
};

定时器

  1. setInterval间隔型

  2. setTimeout 延时型

  3. clearInterval

  4. 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 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消