Day07-js应用

案例：车牌号限行

<body>
        <div id="top">
            <div id="box">
                <input type="text" name="" id="carNo" value="" placeholder="请输入车牌号"/>
                <button onclick="search()">查询</button>
                <button onclick="clearResult()">清除</button>
            </div>
        </div>
        <div id="bottom"></div>
</body>

样式

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #top{
                position: relative;
                height: 200px;
                /*background-color: red;*/
                border-bottom: 1px solid gray;
                
            }
            #box{
                /*定位*/
                position: absolute;
                bottom: 10px;
                
                
                /*水平方向居中*/
                width: 100%;
                text-align: center;
            }
            
            #carNo{
                width: 400px;
                text-align: center;
                font-size: 30px;
                border: 0;
                border-bottom: 1px dotted lightgray;
                vertical-align: bottom;
            }
            
            #carNo:focus{
                outline: 0;
            }
            
            button{
                border: 0;
                width: 70px;
                height: 40px;
                background-color: red;
                color: white;
                font-size: 25px;
            }
            
            /*结果的样式*/
            .result{
                text-align: center;
                font-size: 30px;
            }
            
</style>

<script type="text/javascript">
        //查询
        function search(){
            //1.检查输入的车牌号是否合法
            //获取输入框
            carNoNode = document.getElementById('carNo')
            //获取输入框输入的内容
            carNumber = carNoNode.value
            //确定车牌号的正则表达式
            reObj = /^[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼][A-Z]\s{1}[A-Z0-9]{5}$/
            //正则对象.text(字符串) - 判断字符串和正则表达式是否匹配，匹配返回true，否则返回false
            result = reObj.test(carNumber)
            message = '车牌号不合法！'
            if(result){
                //获取今天的星期
                date = new Date()
                week = date.getDay()
                
                //获取最后一个数字
                var num = 0
                for(i = carNumber.length-1;i>=0;i--){
                    ch = carNumber[i]
                    if(ch >= '0' && ch <= '9'){
                        num = ch
                        break
                    }
                }
                //判断今日是否限行
                if(week == 6 || week == 7){
                    message = '今日不限行！'
                }else{
                    if(num == week || num == (week+5 == 10?0:week+5)){
                        message = '今日限行！'
                    }else{
                        message = '今日不限行！'
                    }   
                }
            }
            
            //将消息展示在网页上
            messageNode = document.createElement('p')
            messageNode.innerText = carNumber+message
            //设置标签的class值
            messageNode.className = 'result'
            resultDivNode = document.getElementById('bottom')
            resultDivNode.appendChild(messageNode)
        }
            
        //清除
        function clearResult(){
            resultDivNode = document.getElementById('bottom')
            //清空内容
            resultDivNode.innerHTML = ''
        }
    </script>

属性操作

<body>
        <p id="p1">我是段落<a id="a1" href="https://www.baidu.com">必读</a></p>
        <img src="img/ti.jpg"/>
    </body>

    pNode = document.getElementById('p1')
    aNode = document.getElementById('a1')

1.节点属性的增删改查

1)查
a.节点.属性

标签相关属性:
innerHTML - 标签内容(包含双标签内容中的其他标签和文件)
innerText - 标签中的文本内容
href,src,text,value,id等，根据标签属性直接获取
注意：标签中的class属性在节点中对应的是className

    alert(pNode.innerHTML)
    alert(pNode.innerText)
    alert(aNode.href)
    alert(aNode.src)

/样式相关属性:可以通过style来获取样式相关的属性

    aNode.style.color    //获取字体颜色
    aNode.style.display  //获取display的值

b.节点.getAttribute(属性名)

    alert(aNode.getAttribute('href'))

2)改、增
a.节点.属性 = 新值

    imgNode.src = 'img/ti.jpg'
    imgNode.title = '利姆露'
    pNode.style.color = red

b.节点.setAttribute(属性名，新值)
注意:inner相关的无效

    imgNode.setAttribute('src', 'img/ti.jpg')

3)删
节点.removeAttribute(属性名)

BOM操作

<body>
    <button onclick="window.open()">打开新窗口</button>
</body>

1.BOM - 浏览器对象模型(browser object model)
js提供了一个全局的对象window,指向的是浏览器
js中声明的所有的全局变量其实都是添加给window的属性

    var a = 100
    console.log(a,window.a)

2.基本操作
a.打开新的窗口:open() - 会返回被打开的窗口对应的对象
open() - 空白窗口
open(url) - 在新窗口打开指定网页
open(url,'','width=300,height=200') - 打开新的窗口并且设置窗口的宽度和高度

newWindow = window.open('01_车牌号限行.html','','width=300,height=200')

b.移动窗口

newWindow.moveTo(100,100)

c.设置窗口的大小

newWindow.resizeTo(500,600)

d.浏览器的宽高
inner是内容的宽度和高度
outer是浏览器的宽度和高度

alert(newWindow.innerWidth,newWindow.innerHeight)
alert(newWindow.outerWidth,newWindow.outerHeight)

3.弹框
a.alert(提示信息) - 提示框，只有提示信息和确定按钮

b.confirm(提示信息) - 提示框，有确定和取消按钮;返回值是布尔值,true->点击确定,false->点击取消

    result = confirm('是否确定删除?')
    console.log(result)

c.prompt - 提示框，有一个输入框，一个确定按钮和取消按钮;
返回值是字符串，点击确定返回值是输入框中的内容，点击取消返回值是null

    result = prompt('提示信息','输入框中的默认值')
    console.log(result)

计时事件

<body>
    <p id="p1">1</p>
</body>

1.定时器

a.开启定时器
setInterval(函数，时间) - 每隔指定的时间调用一次指定的函数;返回值是定时器对象
函数 - 可以是函数名，也可以是匿名函数
时间 - 单位是毫秒

b.停止定时器
clearInterval(定时器对象) - 停止指定的定时器

方案一:传函数

    function timeAction(){
        console.log('aaa')
    }
    timer1 = setInterval(timeAction, 1000)

方案二:匿名函数

    timer2 = setInterval(function(){
        console.log('bbb')
    },1000)

练习:数字递增

    num = 1
    pNode = document.getElementById('p1')
    timer3 = setInterval(function(){
        num++
        pNode.innerText = num
        if(num == 5){
            //停止定时
            clearInterval(timer3)
        }
    },1000)

setTimeout(函数，时间) - 隔指定时间后调用一次指定函数(函数只会调用一次，相当于定时炸弹)
clearTimeout(定时器对象) - 停止指定的定时器

    timer4 = setTimeout(function(){
        alert('时间到！')
    },5000)

广告轮播案例

<body>
    <div id="box">
    <img id="image" src="img/slide-1.jpg"/>
    </div>
</body>

样式

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        text-align: center;
    }
</style>

<script type="text/javascript">
    //获取图片节点
    imageNode = document.getElementById('image')
    //需要轮播的所有的图片地址
    imageArray = ['slide-1.jpg','slide-2.jpg','slide-3.jpg','slide-4.jpg']
    //当前播放的图片的位置
    index = 0
    //每隔1秒修改一次图片内容
    timer1 = setInterval(function(){
        index++
        if(index >= imageArray.length){
            index = 0
        }
        imageNode.src = 'img/'+imageArray[index]
    },1000)
</script>

事件绑定

<body>
    <button onclick="alert('按钮点击')">按钮1</button>
    <button onclick="buttonAction()">按钮2</button>
    <button id="btn3">按钮3</button>
    <button id="btn4">按钮4</button>
    <div id="box1">
            
    </div>
</body>

js是事件驱动语言
1.事件三要素：事件源、事件、事件驱动程序

小明打狗，狗咬他   --  事件源:狗      事件：打狗     事件驱动程序:狗咬他
小明打狗，他爸打他  -- 事件源:狗      事件：打狗     事件驱动程序:他爸打他
点击按钮，跳转到其他页面  -- 事件源:按钮     事件：点击按钮     事件驱动程序:跳转到其他页面

2.绑定事件
a.直接通过标签绑定事件 - 直接在事件对应的属性里写js代码
b.直接通过标签绑定事件 - 直接在事件对应的属性里写调用函数,这个函数中的this是window

    function buttonAction(){
        console.log(this)
    }

c.通过节点绑定事件 - 给节点的事件属性赋函数或者匿名函数
函数中的this就是事件源(当前被点击的按钮)

    btnNode3 = document.getElementById('btn3')
    //给点击事件绑定函数
    btnNode3.onclick = buttonAction
    //给鼠标进入事件绑定函数
    btnNode3.onmouseover = function(){
        this.style.fontSize = '30px'
    }
    btnNode3.onmouseover = function(evt){
        this.style.color = 'red'
    }

d.通过节点绑定事件
节点.addEventListener(事件名，事件驱动程序)
事件名:去掉事件名前面的on, 例如：onclick -> click
这种方式绑定事件，可以给同一个事件源的同一个事件绑定不同的驱动程序
this是事件源，evt是事件对象

    btnNode4 = document.getElementById('btn4')
    btnNode4.addEventListener('click', function(evt){
        console.log(this)
        alert('按钮4被点击！')
        this.style.color = 'red'
    })
    btnNode4.addEventListener('click',function(evt){
        console.log(evt)
        this.style.fontSize = '30px'
    })

3.驱动程序中的evt参数，代表事件对象

    boxNode1 = document.getElementById('box1')
    boxNode1.addEventListener('click',function(evt){
        if(evt.offsetX <= 75){
            this.style.backgroundColor = 'red'
        }else{
            this.style.backgroundColor = 'yellow'
        }
    })

补充：js中的随机数

    console.log(Math.random())   //随机数0-1(小数)
    console.log(parseInt(Math.random()*100))  //0-100的整数

Day07-js应用

推荐阅读更多精彩内容