美文网首页
js基础2

js基础2

作者: 晓晓的忍儿 | 来源:发表于2018-08-21 17:16 被阅读0次

    1.事件

    1）添加事件

    点击事件：onclick

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div style="width: 200px;height: 200px;background-color: red;" onclick="alert('这是一个div')"></div>
        <div style="width: 200px;height: 200px;background-color: blue;" onclick="test()"></div>
        <div id="div1" style="width: 200px;height: 200px;background-color: green;"></div>
    </body>
</html>
<script type="text/javascript">
    function test(){
        console.log('这是div2号，准备完毕')
    }
    var odiv=document.getElementById('div1')
    odiv.onclick=function (){
        console.log('这是div3号，报道完毕')
    }
</script>
    添加事件.JPG

    2)图片显隐

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>显示隐藏图片</title>
    </head>
    <body>
        <div id="img1" style="display: none;">
            <!--得到图片-->
            <img src="img/q2.jpg"/>
        </div>
        <button class="butt" style="width: 70px;height: 35px;background-color: greenyellow;">请出席</button>
    </body>
</html>
<script type="text/javascript">
    var obutton=document.getElementsByClassName('butt')[0]
    obutton.onclick=function (){
        var odiv=document.getElementById('img1')
        if (odiv.style.display=='none'){
            obutton.innerHTML='请休息'
            odiv.style.display='block'
            obutton.style.backgroundColor='red'
        }
        else if(odiv.style.display=='block'){
            obutton.innerHTML="请出席"
            odiv.style.display='none'
            obutton.style.backgroundColor='greenyellow'
        }
        
    }
</script>

    出现：



    3）this的用法

    在匿名函数中的this就是当前对象
    在onclick=demo(this) 就是当前节点
    修改内容
    this.innerHTML = 'xxx'

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>this的应用</title>
    </head>
    <body>
        <div class="div2" style="width: 100px;height: 100px;background-color: goldenrod;"></div>
        <!--this代表该div-->
        <div style="width: 100px;height: 100px;background-color: burlywood" onclick="demo(this)"></div>
    </body>
</html>
<script type="text/javascript">
    var odiv=document.getElementsByClassName('div2')[0]
    odiv.onclick=function (){
        //this代表对象odiv
        this.style.width='200px'
        this.style.height='200px';
        this.innerHTML='<p>秦时明月汉时关,</p><p>万里长征人未还。</p><p>但使龙城飞将在,</p><p>不教胡马度阴山。</p>'   
    }
    function demo(obj){
        console.log(obj)
        obj.style.backgroundColor='red'
        obj.style.height='200px'
    }
</script>

    4)改变背景颜色

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>改变背景颜色</title>
    </head>
    <body>
        <div class="div3" style="width: 200px;height: 200px;background-color: green;">
            
        </div>
    </body>
</html>
<script type="text/javascript">
    var odiv=document.getElementsByClassName('div3')[0]
    odiv.onclick=function(){
        if (odiv.style.backgroundColor=='green'){
            odiv.style.backgroundColor='red'
        }
        else if(odiv.style.backgroundColor=='red'){
            odiv.style.backgroundColor='green'
        }
    }
</script>

    5)表单控制

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单控制</title>
    </head>
    <body>
        <input type="text" name="" id="ip" value="请输入用户名" />
        <input type="text" name="" id="" value="请输入用户名"  onfocus="clear1(this)" onblur="recover(this)"/>
    </body>
</html>
<script type="text/javascript">
    var oinput=document.getElementById('ip')
    oinput.onfocus=function (){
        if(oinput.value=='请输入用户名'){
            oinput.value=''
        }
    }
    oinput.onblur=function(){
        if(oinput.value==''){
            oinput.value='请输入用户名'
        }   
    }
    function clear1(obj){
        if (obj.value=='请输入用户名'){
            obj.value=''
        }
    }
    function recover(obj){
        if (obj.value==''){
            obj.value='请输入用户名'
        }
    }
</script>


    2.onload函数

    window的事件，windows.onload = function () {} 是在整个文档加载完毕之后执行，但是自己写的onclick的点击函数不能写到onload里面，因为内部函数只能在内部使用，不能再外部使用
    如果实在是想用，window.lala = function () {}

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>onload函数</title>
        <script type="text/javascript">
//          demo() 有错
            window.onload=function(){
                var odiv = document.getElementById('div2')
                odiv.onclick = function () {
                    this.style.backgroundColor = 'red'
                }
            }
//          function demo(obj) {
//          obj.style.backgroundColor = 'cyan'
//      }
        </script>
    </head>
    <body>
        <div id="div2" style="width:300px; height:300px; background-color:pink" onclick="demo(this)">
        </div>
    </body>
</html>
<script type="text/javascript">
//  function demo(obj){
//              obj.style.backgroundColor='red'
//          }
</script>

    3.选项卡

    方法一：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            button{
                width: 200px;
                height: 100px;
                font-size: 40px;
                background-color: pink;
                margin-left: 50px;
                display: inline-block;
            }
            div{
                width: 970px;
                height: 600px;
                font-size: 50px;
                background-color: yellow;
                margin-left: 50px;
                margin-top: 50px;
                display: none;
            }
            .active1{
                font-size: 50px;
                background-color: brown;
            }
            .show1{
                display: block;
            }
        </style>
    </head>
    <body>
        <button class="active1" onclick="dudu(this,0)">王</button>
        <button onclick="dudu(this,1)">李</button>
        <button onclick="dudu(this,2)">张</button>
        <button onclick="dudu(this,3)">刘</button>
        <div class='show1'>王 王 王 王 王 王 王 王 王  王 王 王 王 王 王 王 王</div>
        <div>李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 </div>
        <div>张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张  </div>
        <div>刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 </div>
    </body>
</html>
<script type="text/javascript">
    var obuttons=document.getElementsByTagName('button')
    var adivs=document.getElementsByTagName('div')
    function dudu(obj,index){
        for (var i=0;i<obuttons.length;i++){
            obuttons[i].className=''
            adivs[i].className=''
        }
        obj.className='active1'
        adivs[index].className='show1'
    }
</script>

    方法二：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            button{
                width: 200px;
                height: 100px;
                font-size: 40px;
                background-color: pink;
                margin-left: 50px;
                display: inline-block;
            }
            div{
                width: 970px;
                height: 600px;
                font-size: 50px;
                background-color: yellow;
                margin-left: 50px;
                margin-top: 50px;
                display: none;
            }
            .active2{
                font-size: 50px;
                background-color: brown;
            }
            .show2{
                display: block;
            }
        </style>
    </head>
    <body>
        <button class="active2">王</button>
        <button >李</button>
        <button >张</button>
        <button >刘</button>
        <div class='show2'>王 王 王 王 王 王 王 王 王  王 王 王 王 王 王 王 王</div>
        <div>李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 李 </div>
        <div>张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张 张  </div>
        <div>刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 刘 </div>
    </body>
</html>
<script type="text/javascript">
    var obuttons=document.getElementsByTagName('button')
    var adivs=document.getElementsByTagName('div')
    for (var i=0;i<obuttons.length;i++){
        obuttons[i].index=i
        obuttons[i].onclick=function(){
            for (var j=0;j<obuttons.length;j++){
                obuttons[j].className=''
                adivs[j].className=''
            }
            this.className='active2'
            adivs[this.index].className='show2'
        }
        
    }
</script>

    2.JPG

    4.定时器

    定时器：分为两种，一种是周期性定时器，一种是一次性定时器
    周期性：每隔5s执行一次函数
    一次性：几秒之后执行一次函数，执行完毕定时器结束
    var timer = setTimeout(fn, 5000)
    5000ms之后执行fn一次。然后结束
    销毁定时器 clearTimeout(timer)

    一次性：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定时器</title>
    </head>
    <body>
        <div id="img2">
            <img src="../img/q2.jpg"/>
        </div>
        <button id="btn">取消定时器</button>
    </body>
</html>
<script type="text/javascript">
    var odiv=document.getElementById('img2')
    var obutton=document.getElementById('btn')
    var timer=setTimeout(function(){
        odiv.style.display='none'
    },5000)
    obutton.onclick=function (){
        clearTimeout(timer)
    }
</script>

    周期性：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>周期性定时器</title>
    </head>
    <body>
        <div id="img3" style="width: 200px;height: 200px;background-color: red;">
        </div>
        <button id='but'>停止</button>
    </body>
</html>
<script type="text/javascript">
    var odiv=document.getElementById('img3')
    var obutton=document.getElementById('but')
    
    var timer=setInterval(function(){
        color=odiv.style.backgroundColor
        if (color=='red'){
            odiv.style.backgroundColor='green'
        }
        else if(color=='green'){
            odiv.style.backgroundColor='red'
        }
    },50)
    obutton.onclick=function(){
        clearInterval(timer)
    }
</script>

    计时器：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div3{
                width: 100%;
                height: 300px;
                font-size: 300px;
                background-color: pink;
                text-align: center;
                line-height: 300px;
            }
        </style>
    </head>
    <body>
        <div id="div3">
            0
        </div>
    </body>
</html>
<script type="text/javascript">
    var odiv=document.getElementById('div3')
    var timer=null
    var i=0
    odiv.onmouseover=function(){
        timer=setInterval(function(){
            i+=1
            odiv.innerHTML=i
        },1000)
    }
    odiv.onmouseout=function(){
        clearInterval(timer)
    }
</script>

    5)获取非行内样式

    IE浏览器获取非行内样式方式
    obj.currentStyle['name']
    火狐和谷歌获取方式
    getComputedStyle(odiv, null)['width']
    获取非行内样式的兼容性写法
    function getStyle(obj, name) {
    return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
    }

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div {
                width: 300px;
                height: 300px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div id="lala" ></div>
        <input type="text" id="ip">
        <button onclick="demo()">点我获取div宽度</button>
    </body>
</html>
<script type="text/javascript">
    var odiv=document.getElementById('lala')
    function demo() {
//      获 取div的宽度,只能获取行内样式
//     var kuan = odiv.style.width
       

    // 获取非行内样式
//     ie浏览器
       var kuan = odiv.currentStyle['width']
//      谷歌和搜狐
//     var kuan = getComputedStyle(odiv, null)['width']
//     var kuan = getStyle(odiv, 'width')
    // 显示到input框中
    var oinput = document.getElementById('ip')
    oinput.value = kuan
}
    // 获取非行内样式的兼容性写法
function getStyle(obj, name) {
    return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}
</script>

    6.BOM操作

    window.setTimeout,window.setInterval
    window.alert\window.confirm
    window.open
    window.history(back、go)
    history.go(1) 去往下一个网址
    history.go(2) 去往下下一个网址（向前）
    history.back() 倒退一个网址（向后）
    location
    href : 读取得到当前的url，设置跳转到指定的url
    reload() : 刷新整个页面

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BOM操作</title>
    </head>
    <body>
        <button id="btn1">操作1</button>
        <button id="btn2">操作2</button>
        <button id="btn3">操作3</button>
        <button id="btn4">操作4</button>
    </body>
</html>
<script type="text/javascript">
    var obutton1=document.getElementById('btn1')
    var obutton2=document.getElementById('btn2')
    var obutton3=document.getElementById('btn3')
    var obutton4=document.getElementById('btn4')
    obutton1.onclick=function(){
        ret=window.confirm('请选择确定或者取消')
        if (ret==true){
            console.log('你点击了确定')
        }
        if(ret==false){
            console.log('你点击了取消')
        }
    }
    obutton2.onclick=function(){
        open('http://www.baidu.com/','_self')
    }
    obutton3.onclick=function(){
//      window.history.go(2)
        window.history.back(1)
    }
    obutton4.onclick=function(){
        console.log(location.href)
//      location.href = 'http://www.baidu.com/'
        location.reload()
    }
</script>

    7.select下拉框和oninput事件

    onchange : 事件，用户点击下拉框触发
    selectedIndex : 用户点击的option的下标，下标从0开始
    options : osel.options 可以得到所有的option对象，这是一个数组
    input框的oninput事件，只要内容改变，就会触发

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>select下拉框</title>
    </head>
    <body>
        <select name="刺客" id="sel">
            <option value="1">阿珂</option>
            <option value="2">兰陵王</option>
            <option value="3">孙悟空</option>
            <option value="4">赵云</option>
            <option value="5">李白</option>
        </select>
        <input type="text" id="ip">
    </body>
</html>
<script type="text/javascript">
    var osel=document.getElementById('sel')
    var oip=document.getElementById('ip')
    osel.onchange=function(){
        alert(osel.options[osel.selectedIndex].innerHTML)
    }
    oip.oninput=function(){
        console.log(this.value)
    }
</script>

    相关文章

      网友评论

          本文标题：js基础2

          本文链接：https://www.haomeiwen.com/subject/ryujiftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|js基础2|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！