美文网首页
JavaScript3

JavaScript3

作者: 文化银儿 | 来源:发表于2018-08-21 19:18 被阅读0次

    1、添加事件

    （1）添加事件方式

    <!DOCTYPE html>
<html lang="en">
<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="div" style="width:200px; height:200px; background-color:green"></div>
</body>
</html>
<script>
function test() {
    console.log('花田里犯了错,说好,破晓前忘掉')
}
var odiv = document.getElementById('div')
// odiv.onclick = function () {
//     console.log('遥远的东方有一条龙')
// }
odiv.onclick = test
</script>

    效果如下：


    1.gif

    （2）显示隐藏图片
    操作div的display属性，在block和none之间切换即可

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏图片</title>
</head>
<body>
    <div class="tu">
        <img src="xiuxian.jpg" alt="帅气的金先生" style="width: 200px;height: 250px;">
    </div>
    <button id="btn">让秀贤消失</button>
    <button id="btn1" onclick="show()">再现</button>
</body>
</html>
<script>
// 显示和隐藏图片操作的是div的display属性，在block和none之间切换
var obutton = document.getElementById('btn')
obutton.onclick = function () {
    // 找到指定div，将其display属性修改为none
    var odiv = document.getElementsByClassName('tu')[0]
    odiv.style.display = 'none'
}

function show() {
    var odiv = document.getElementsByClassName('tu')[0]
    odiv.style.display = 'block'
}
</script>

    效果如下：


    2.gif

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

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this的使用</title>
</head>
<body>
    <div class="tang" style="width:200px; height:200px; background-color:red"></div>
    <div class="tang" style="width:200px; height:200px; background-color:blue" onclick="demo(this)"></div>
</body>
</html>
<script>
    // 点击div，将宽度有200px修改为400px
    var odiv = document.getElementsByClassName('tang')[0]
    odiv.onclick = function () {
        console.log(this)
        // this就是odiv
        this.style.width = '400px'
        // 给div添加内容
        this.innerHTML = '秦时明月汉时关,万里长征人未还,但使龙城飞将在,不教胡马度阴山'
    }

    function demo(obj) {
        // 这里面的this是window，在js里面写的所有的函数都是window的函数，调用demo其实就是  window.demo()
        console.log(this)
        // var odiv = document.getElementsByClassName('tang')[1]
        obj.style.height = '400px'
    }
</script>

    效果如下：


    3.gif

    （4） 切换背景色

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换div的背景色</title>
</head>
<body>
    <div id="bai" style="width:300px; height:300px; background-color:red;"></div>
</body>
</html>
<script>
var odiv = document.getElementById('bai')
odiv.onclick = function () {
    // 先获取div的背景色
    color = this.style.backgroundColor
    if (color == 'red') {
        this.style.backgroundColor = 'yellow'
    } else {
        this.style.backgroundColor = 'red'
    }  
}
</script>

    效果如下:


    4.gif

    （5）表单内容控制

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单内容控制</title>
</head>
<body>
    <input id="ip" type="text" value="请输入用户名">
    <input type="text" value="请输入用户名" onfocus="cleara(this)" onblur="recover(this)">
</body>
</html>
<script>
    // clear是关键字，不能使用函数名
function cleara(obj) {
    // console.log('clear')
    if (obj.value == "请输入用户名") {
        obj.value = ''
    }
}
function recover(obj) {
    if (obj.value == '') {
        obj.value = '请输入用户名'
    }
}
var oinput = document.getElementById('ip')
oinput.onfocus = function () {
    // 判断要不要清空
    if (this.value == "请输入用户名") {
        this.value = ''
    }
}
oinput.onblur = function () {
    // 判断内容是不是为空，如果为空变成下面这个
    if (this.value == '') {
        this.value = '请输入用户名'
    }
}
</script>

    效果如下：


    5.gif

    2、onload函数

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

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload函数</title>
    <script>
        // var a = '岳云鹏'
        // demo()
        // onload是window的事件，意思就是等文档加载完毕之后来执行这个代码
        window.onload = function () {
            // var odiv = document.getElementById('kong')
            // console.log(odiv)
            // odiv.onclick = function () {
            //     this.style.backgroundColor = 'cyan'
            // }

            
        }
        function demo(obj) {
            obj.style.backgroundColor = 'cyan'
        }
        
    </script>
</head>
<body>
    <div id="kong" style="width:300px; height:300px; background-color:pink" onclick="demo(this)"></div>
</body>
<script>
    
    // console.log(a)
    // function demo() {
    //     console.log('你喜欢岳云鹏的相声吗?')
    // }
</script>
</html>
<script>
    // alert(a)
    // demo()

    function test() {
        // function lala() {
        //     console.log('这是一个内部函数')
        // }
        // lala()
        window.lala = function () {
            console.log('这是lala函数')
        }
    }


    test()
    // test.lala()
    lala()
</script>

    效果如下：


    6.gif

    3、选项卡

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡</title>
    <style>
    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;
    }
    .active {
        font-size: 50px;
        background-color: blue;
    }
    .show {
        display: block;
    }
    </style>
</head>
<body>
    <button class="active" 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="show">菊花台、千里之外、七里香、霍元甲、听妈妈的话、稻香、双节棍、简单爱</div>
    <div>花田错、龙的传人、唯一</div>
    <div>慢慢、吻别、一千个伤心的理由</div>
    <div>谢谢你的爱、冰雨、天意、忘情水</div>
</body>
</html>
<script>
    // 得到所有的button
    var abuttons = document.getElementsByTagName('button')
    // 得到所有的div
    var adivs = document.getElementsByTagName('div')
    function dudu(obj, index) {
        // 先将所有的button的class属性设置为空
        for (var i = 0; i < abuttons.length; i++) {
            abuttons[i].className = ''
            adivs[i].className = ''
        }
        // 给指定的button添加样式
        obj.className = 'active'
        // 给指定的div添加样式
        adivs[index].className = 'show'
    }
</script>

    效果如下：


    7.gif 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡</title>
    <style>
    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;
    }
    .active {
        font-size: 50px;
        background-color: blue;
    }
    .show {
        display: block;
    }
    </style>
</head>
<body>
    <button class="active">大牛</button>
    <button>二牛</button>
    <button>王助理</button>
    <button>啤教授</button>
    <div class="show">大牛、大牛、大牛</div>
    <div>二牛、二牛、二牛</div>
    <div>王助理、王助理、王助理、王助理、王助理、王助理</div>
    <div>啤教授、啤教授、啤教授、啤教授</div>
</body>
</html>
<script>
// 得到所有的button
var abuttons = document.getElementsByTagName('button')
var adivs = document.getElementsByTagName('div')
// 循环button数组，给里面每一个button添加点击事件
for (var i = 0; i < abuttons.length; i++) {
    // 给指定的button手动添加一个属性，用来保存是第几个button
    abuttons[i].index = i
    abuttons[i].onclick = function () {
        // 首先清掉所有button和div上面的class
        for (var j = 0; j < abuttons.length; j++) {
            abuttons[j].className = ''
            adivs[j].className = ''
        }
        // 给指定的button添加样式
        this.className = 'active'
        // console.log(i)
        // 给指定的div添加样式
        adivs[this.index].className = 'show'
    }
}
</script>

    效果如下：


    8.gif

    4、定时器

    • 定时器：分为两种，一种是周期性定时器，一种是一次性定时器
    • 周期性：每隔5s执行一次函数
    • 一次性：几秒之后执行一次函数，执行完毕定时器结束
      var timer = setTimeout(fn, 5000)
      5000ms之后执行fn一次。然后结束
    • 销毁定时器 clearTimeout(timer)
    • 计数器
    • 图片消失
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片消失</title>
</head>
<body>
    <div id="baby">
        <img height="800px" src="meinv.jpg" alt="气质美女">
    </div>
    <button id="btn">点我试试</button>
</body>
</html>
<script>
    var odiv = document.getElementById('baby')
    var obtn = document.getElementById('btn')
    // timer就是一个定时器
    var timer = setTimeout(function () {
        odiv.style.display = 'none'
    }, 5000)

    obtn.onclick = function () {
        // 清除timer这个定时器
        clearTimeout(timer)
    }
</script>

    效果如下：


    1.gif 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>周期性定时器</title>
</head>
<body>
    <button onclick="demo()">一行白鹭上青天</button>
</body>
</html>
<script>
    var timer = setInterval(function () {
        console.log('两个黄鹂鸣翠柳')
    }, 500)

    function demo() {
        clearInterval(timer)
    }
</script>

    效果如下：


    1.gif 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一闪一闪亮晶晶</title>
</head>
<body>
    <div id="lala" style="width:300px; height:300px; background-color:red"></div>
</body>
</html>
<script>
    var odiv = document.getElementById('lala')
    setInterval(function () {
        color = odiv.style.backgroundColor
        if (color == 'red') {
            odiv.style.backgroundColor = 'yellow'
        } else {
            odiv.style.backgroundColor = 'red'
        }
    }, 500)
</script>

    效果如下：


    1.gif 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
    <style>
    div {
        width: 100%;
        height: 300px;
        line-height: 300px;
        text-align: center;
        font-size: 300px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div id="dudu">0</div>
</body>
</html>
<script>
var odiv = document.getElementById('dudu')
// 定义一个全局变量，用来保存定时器对象
var timer = null
// 定义一个全局的计数器
var i = 0
odiv.onmouseover = function () {
    timer = setInterval(function () {
        i++
        // 设置div的内容
        odiv.innerHTML = i
    }, 1000)
}

odiv.onmouseout = function () {
    clearInterval(timer)
}
</script>

    效果如下：


    1.gif

    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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取非行内</title>
    <style>
    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>
var odiv = document.getElementById('lala')
function demo() {
    // 获取div的宽度,只能获取行内样式
    // var kuan = odiv.style.width

    // 获取非行内样式
    // 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>

    效果如下：


    1.gif

    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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM操作</title>
</head>
<body>
    <button id="btn">点我</button>
    <button id="btn1">点一下</button>
    <button id="btn2">张家辉</button>
    <button id="btn3">张潇潇</button>
</body>
</html>
<script>
    var obutton = document.getElementById('btn')
    var obutton1 = document.getElementById('btn1')
    var obutton2 = document.getElementById('btn2')
    var obutton3 = document.getElementById('btn3')
    obutton.onclick = function () {
        ret = window.confirm('今天晚上准备吃什么')
        if (ret == true) {
            console.log('你点击了确定')
        } else {
            console.log('你点击了取消')
        }
    }
    obutton1.onclick = function () {
        window.open('http://www.baidu.com/', '_self')
    }
    obutton2.onclick = function () {
        // window.history.go(2)
        window.history.back()
        // file:///C:/Users/ZBLi/Desktop/1805/day02/14-bom.html
    }
    obutton3.onclick = function () {
        // 得到当前的url
        // 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 lang="en">
<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>
    var osel = document.getElementById('sel')
    osel.onchange = function () {
        // alert('我被出发了')
        // alert(osel.selectedIndex)
        alert(osel.options[osel.selectedIndex].innerHTML)
    }

    var oinput = document.getElementById('ip')
    oinput.oninput = function () {
        console.log(this.value)
    }

    效果如下：

    </script> 1.gif

    相关文章

      网友评论

          本文标题：JavaScript3

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

          延伸阅读

          深度阅读

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

          栏目导航

          热点阅读

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

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

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

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

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

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