美文网首页
2019-02-12JS应用

2019-02-12JS应用

作者: 遥远的她197 | 来源:发表于2019-02-12 20:59 被阅读0次

    一， 车牌号限行案列

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--样式-->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #top{
                height: 200px;
                /*background-color: darkgoldenrod;*/
                border-bottom: 1px solid gray;
                
                position: relative;
            }
            #box{
                /*定位*/
                position: absolute;
                bottom: 10px;
                
                /*水平方向居中*/
                width: 100%;
                text-align: center;
            }
            
            #carNo{
                width: 400px;
                text-align: center;
                font-size: 35px;
                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;
            }
            
            /*结果的样式*/
            .reslut{
                text-align: center;
                font-size: 30px;
                color: darkcyan;
            }
        </style>
        
        
    </head>
    <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>
        
        
    <!--js代码-->
    <script type="text/javascript">
        //查询
        function search(){
            //1.检查输入的车牌号是否合法
            //获取输入框
            carNoNode = document.getElementById('carNo')
            //获取输入框输入的内容
            carNumber = carNoNode.value
            //确定车牌号的正则表达式
            reObj = /^[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼][A-Z]\s*[A-Z0-9]{5}$/
            //正则对象.test(字符串)  -  判断字符串和正则表达式是否匹配，匹配返回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 = 'reslut'
            resultDivNode = document.getElementById('bottom')
            resultDivNode.appendChild(messageNode)
        }
        //清除
        function clearResult(){
                resultDivNode = document.getElementById('bottom')
                //清空内容将内容替换成空白
                resultDivNode.innerHTML = ''
            }
        
    </script>
    
    </body>
</html>

    二，属性操作

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="p1">我是段落<a id="a1" href="https://www.baidu.com">必读</a></p>
        <img src="img/学习.jpg"/>
    </body>
</html>
<script type="text/javascript">
    pNode = document.getElementById('p1')
    aNode = document.getElementById('a1')
    imgNode = document.getElementsByTagName('img')[0]
    //1.节点属性的增删改查
    //1)查
    //a.节点.属性
    //innerHTML - 标签内容(包含双标签内容中的其他标签和文件)
    //innerText - 标签中的文本内容
    //href,src,text,value,id等，根据标签属性直接获取；注意:标签中的class属性在节点中对应的是className
    //alert(pNode.innerHTML)
    //alert(pNode.innerText)  //只取文本内容 必读
    alert(aNode.href)
    alert(imgNode.src)
    
    //样式相关属性:可以通过style来获取样式相关的属性
    aNode.style.color //获取字体颜色
    aNode.style.display //获取display的值
    
    //b.节点.getAttribute(属性名)
    //alert(aNode.getAttribute('href'))  //和alert(aNode.href)效果一样
    
    //2)改
    //a.节点.属性 = 新值
    imgNode.src = 'img/jd_logo.ico'
    imgNode.title = '京东'
    pNode.style.color = 'darkgoldenrod'
    pNode.thIndex = 20  // 添加属性
    alert(pNode.thIndex)
    //b.节点.setAttribute(属性名,新值)
    //注意:inner相关的无效
    imgNode.setAttribute('src', 'img/logo-footer.png')
    
    //3)删
    //节点.removeAttribute(属性名)
    imgNode.removeAttribute('src')
</script>

    三，BOM操作

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button onclick="window.open('01车牌号限行案列.html')">打开新窗口</button>
    </body>
</html>
<script type="text/javascript">
    
    //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浏览器的宽度和高度
    console.log('=====:',newWindow.innerWidth, newWindow.innerHeight)
    console.log('!!!!!:',newWindow.outerWidth, newWindow.outerHeight)
    
    //3.弹框
    //a.alert(提示信息) - 提示框，只有提示信息和确定按钮
    //b.confirm(提示信息) - 提示框，有确定和取消按钮；返回是布尔值，true->点击确定，false->点击取消
//  result = confirm('是否确定删除?')
//  console.log(result)  
    //c.prompt - 提示框，有一个输入框，一个确定按钮和取消按钮; 
    //返回值是字符串，点击确定返回值是输入框中的内容，点击取消返回值是null
//  result = prompt('提示信息', '输入框中的默认值')
//  console.log(result)
    
</script>

    四, 计时事件

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="p1">5</p>
    </body>
</html>
<script type="text/javascript">
    //1.定时器
    //a.开启定时器
    //setInterval(函数,时间)  -  每隔指定的时间调用一次指定的函数;返回是定时器对象
    //setTimeout(函数,时间)   - 隔指定时间后调用一次指定函数(函数只会调用一次,相当于定时炸弹)
    //函数 - 可以是函数名,也可以是匿名函数
    //时间 - 单位是毫秒
    //b.停止定时
    //clearInterval(定时器对象)  - 停止指定的定时器
    //clearTimeout(定时器对象)  - 停止指定的定时器
    
    //方案一:传函数
    function timeAction(){
        console.log('aaa')
    }
    timer1 = setInterval(timeAction, 1000)
    //方案二:匿名函数
    timer2 = setInterval(function(){
        console.log('bbb')
    },1000)
//  练习: 让数字每隔一秒加1
    num = 5
    pNode = document.getElementById('p1')
    timer3 = setInterval(function(){
        num--
        pNode.innerText = num
        if(num == 0){
            //停止定时
            clearInterval(timer3)
            window.open('https://www.baidu.com')
        }
    },1000)
    timer22 = setTimeout(function(){
        alert('时间到')
    },5000)
    
    
</script>

    五练习广告轮播

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <img id='image' src="img/slide-1.jpg" alt=""/>
        </div>
        
        <script type="text/javascript">
            //获取图片节点
            imageNode = document.getElementById('image')
            //需要轮播的所有的图片地址
            imageArray = ['slide-1.jpg','slide-2.jpg','slide-3.jpg','slide-4.jpg']
            //当前播放的图片的位置
            index = 0
            //每隔一秒修改图片内容
           setInterval(function(){
               index++
               if(index >= imageArray.length){
                  index = 0
               }
               imageNode.src = 'img/' + imageArray[index]
           },1500)
           
        </script>
    </body>
</html>

    六 事件绑定

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box1{
                width: 150px;
                height: 150px;
                background-color: lawngreen;
            }
        
        </style>
    </head>
    <body>
        <button onclick="alert('按钮点击')">按钮0</button>
        <button onclick="buttonAction()">按钮1</button>
        <button id="btn2">按钮2</button>
        <button id="btn3">按钮3</button>
        <div id="box1">
            
        </div>
        
    </body>
</html>

<script type="text/javascript">

    //js是事件驱动语言
    //1.事件三要素: 事件源、事件、事件驱动程序
    //小明打狗，狗咬他   --  事件源：狗   事件：打狗    事件驱动程序: 狗咬他
    //小明打狗，他爸打他  --   事件源：狗   事件：打狗    事件驱动程序: 他爸打他
    //点击按钮，跳转到其他页面  -- 事件源: 按钮   事件:点击按钮   事件驱动程序:跳转到其他页面
    //2.绑定事件
    //a.直接通过标签绑定事件 - 直接在事件对应的属性里写js代码
    //b.直接通过标签绑定事件 - 直接在事件对应的属性里写调用函数,这个函数中的this是window
    function buttonAction(){
        console.log(this)
    }
    //c.通过节点绑定事件 - 给节点的事件属性赋函数或者匿名函数
    //函数中this就是事件源(当前被点击的按钮)
    btnNode2 = document.getElementById('btn2')
    //给点击事件绑定函数
    btnNode2.onclick = buttonAction
    //给鼠标进入事件绑定函数
    btnNode2.onmouseover = function(){
        this.style.fontSize = '30px'
    }
    btnNode2.onmouseover = function(evt){
        this.style.color = 'red'
    }
    
    //d.通过节点绑定事件 
    //节点.addEventListener(事件名, 事件驱动程序)
    //事件名: 去掉事件名前面的on, 例如onclick -> click
    //这种方式绑定事件，可以给同一个事件源的同一个事件绑定不同的驱动程序
    //this是事件源, evt是事件对象
    btnNode3 = document.getElementById('btn3')
    btnNode3.addEventListener('click', function(evt){
        console.log(this)
//      alert('按钮3被点击')
        this.style.color = 'red'
    })
    btnNode3.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()*255))    //0-100的整数
    console.log(parseInt(Math.random()*90+10))  //10-100的整数
    

</script>

    七,事件冒泡和事件捕获

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 400px;
                height: 400px;
                margin-left: auto;
                margin-right: auto;
                background-color: blanchedalmond;
            }
            #div2{
                width: 200px;
                height: 200px;
                margin-left: auto;
                margin-right: auto;
                background-color: seagreen;
            }
            #div3{
                width: 100px;
                height: 100px;
                margin-left: auto;
                margin-right: auto;
                background-color: khaki;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3">
                </div>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
    //1.事件冒泡
    //子标签上产生的事件会传递给父标签
    //2.事件捕获:让事件不再传递给父标签
    //事件.st
    //获取节点
    divNode1 = document.getElementById('div1')
    divNode2 = document.getElementById('div2')
    divNode3 = document.getElementById('div3')
    divNode1.addEventListener('click',function(){
        alert('div1被点击')
    })
    divNode2.addEventListener('click',function(evt){
        alert('div2被点击')
        evt.stopPropagation()
    })
    divNode3.addEventListener('click',function(evt){
        alert('div3被点击')
        //让evt事件对象不传递给当前标签的父标签
        evt.stopPropagation()
    })
    
</script>

    相关文章

      网友评论

          本文标题：2019-02-12JS应用

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

          延伸阅读

          深度阅读

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

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|2019-02-12JS应用|投稿指南|网站地图|RSS订阅|排版工具|手机版

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

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

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

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

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