day23_task_js应用

task1 ： 要求完成水果动态添加删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                position: relative;
            }
            #top{
                margin-top: 50px;
                margin-left: 50px;
            }
            .fruit1,.fruit{
                width: 260px;
                height: 60px;
                margin-bottom: 2px; 
                text-align: center;
            }
            .fruit1{
                background-color: rgb(80,141,141);  
            }
            .name{
                display: inline-block;
                line-height: 60px;
                font-size: 20px;
                color: white;
            }
            .del{
                float: right;
                cursor: pointer;
                position: absolute;
                right: 3px;
                line-height: 60px;
                font-size: 18px;
            }
            #bottom{
                margin-left: 50px;  
            }
            #bottom #text{
                height: 70px;
                text-align: center;
                font-size: 20px;
                width: 260px;
                border: 0;
                border-bottom: 2px solid rgb(150,150,150);
            }
            #bottom #text:focus{
                outline: 0;
            }
            #bottom #button{
                height: 50px;
                border: 0;
                background-color: goldenrod;
                color: white;
                width: 80px;
                font-size: 18px;
            }
            #bottom #button:focus{
                outline: 0;
            }
            
        </style>
    </head>
    <body>
        <div id="top">
            <div class="fruit1">
                <font class="name">苹果</font><font class="del">×</font>
            </div>
            <div class="fruit1">
                <font class="name">西瓜</font><font class="del">×</font>
            </div>
            <div class="fruit1">
                <font class="name">香蕉</font><font class="del">×</font>
            </div>
            <div class="fruit1">
                <font class="name">哈密瓜</font><font class="del">×</font>
            </div>
            
        </div>
        <div id="bottom">
            <input type="text" name="" id="text" value="" placeholder="请输入水果名"/>
            <input type="button" name="" id="button" value="确定" onclick="addFruit()"/>
        </div>
        
        
        <script type="text/javascript">
            //产生随机颜色
            function randomColor(a=0.5){
                var num1 = parseInt(Math.random()*255)
                var num2 = parseInt(Math.random()*255)
                var num3 = parseInt(Math.random()*255)
                return "rgba(" + num1 + "," + num2 + "," + num3 +"," + a + ")"
            }
            
            //添加水果
            buttonNode = document.getElementById("button")
            buttonNode.onclick = function(){
                //获取输入内容
            inputeNode = document.getElementById("text")
            var fruitMessage = inputeNode.value
            if (fruitMessage.length == 0){
                alert("请输入水果名")
                return
            }
            inputeNode.value = ""
            
            //创建节点
            var divNode = document.createElement("div")
            divNode.style.backgroundColor = randomColor(0.7)
            divNode.className = "fruit"
            
            var nameNode = document.createElement("font")
            nameNode.className = 'name'
            nameNode.innerText = fruitMessage
            
            var delNode = document.createElement("font")
            delNode.className = "del"
            delNode.innerText = "×"
            delNode.onclick = delAction
        
            //添加节点
            topNode = document.getElementById("top")
            divNode.appendChild(nameNode)
            divNode.appendChild(delNode)
            topNode.insertBefore(divNode,topNode.firstElementChild)
            }           
            
            //删除节点
            delNodes = document.getElementsByClassName("del")
            for (i=0;i<delNodes.length;i++){
            delNode  = delNodes[i]
            delNode.onclick = delAction
            function delAction(){
                    this.parentElement.remove()
                }
            }
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                position: relative;
            }
            #top{
                margin-left: 60px;
                margin-top: 60px;
            }
            #top div{
                width: 200px;
                height: 50px;
                color: white;
                font-size: 20px;
                margin-bottom: 2px;
                text-align: center;
                line-height: 50px;
            }
            #top div font{
                position: absolute;
                right: 3px;
                /*将光标变成手*/
                cursor: pointer;
            }
            
            #bottom{
                margin-left: 60px;
            }
            #bottom #text{
                display: inline-block;
                width: 200px;
                height: 50px;
                border: none;
                outline: none;
                /*让光标在中间*/
                text-align: center;
                border-bottom: 2px solid lightgrey;
                font-size: 16px;
            }
            #bottom #button{
                display: inline-block;
                width: 100px;
                height: 30px;
                border: none;
                outline: none;
                background-color: coral;
                color: white;
            }
            
            
        </style>
    </head>
    <body>
        <div id="top">
        </div>
        <!--添加默认的水果标签-->
        <script type="text/javascript">
                var fruitArray = ['香蕉', '苹果', '草莓', '火龙果'];
                for(index in fruitArray){
                    fruitName = fruitArray[index];
                    creatFruitNode(fruitName, 'darkgreen')
                }
                //==========删除水果=============
                function delFruit(){
                    //在这儿，点击的是哪个标签this就指向谁
                    this.parentElement.remove()
                    
                }
                //添加节点
                function creatFruitNode(fruitName, color1){
                    //创建标签
                    var fruitNode = document.createElement('div')
                    fruitNode.innerHTML = fruitName;
                    var fontNode = document.createElement('font');
                    fontNode.innerText = '×';
                    //给点击事件绑定驱动程序
                    fontNode.onclick = delFruit;
                    fruitNode.appendChild(fontNode);
                    //设置背景颜色
                    fruitNode.style.backgroundColor = color1
                    //添加标签
                    var topNode = document.getElementById('top')
                    topNode.appendChild(fruitNode)
                }
            </script>
            
        <div id="bottom">
            <input type="text" name="" id="text" value="" />
            <input type="button" name="" id="button" value="确定" onclick="addFruit()"/>
        </div>
        <script type="text/javascript">
            //=========产生随机颜色=============
            function randomColor(){
                var num1 = parseInt(Math.random()*255);
                var num2 = parseInt(Math.random()*255);
                var num3 = parseInt(Math.random()*255);
                return 'rgb('+num1+','+num2+','+num3+')';
            }
            
            //==========添加水果==============
            function addFruit(){
                //获取输入框中的内容
                var inputNode = document.getElementById('text');
                var addName = inputNode.value;
                if(addName.length == 0){
                    alert('输入的内容为空！');
                    return;
                }
                //清空输入框中的内容
                inputNode.value = '';
                //创建标签
                var fruitNode = document.createElement('div');
                fruitNode.innerHTML = addName;
                var fontNode = document.createElement('font');
                fontNode.innerText = '×';
                //给点击事件绑定驱动程序
                fontNode.onclick = delFruit;
                fruitNode.appendChild(fontNode);
                //创建随机颜色
                //'rgb(255, 0, 0)'
                fruitNode.style.backgroundColor = randomColor();
                var topNode = document.getElementById('top');
                topNode.insertBefore(fruitNode, topNode.firstChild);
                
            }
        </script>
        
        
    </body>
</html>

task2: 要求实现车牌查询限行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #top{
                height: 180px;
                border-bottom: 1px solid rgb(150,150,150);
                text-align: center;
                position: relative;
            }
            #carname{
                text-align: center;
                font-size: 20px;
                border: 0;
                width: 300px;
                border-bottom: 1px dotted rgb(150,150,150);
    
            }
            #top #middle{
                position: absolute;
                bottom: 4px;
                width: 100%;
            }
            .button{
                color: white;
                width: 80px;
                height: 30px;
                margin-right: 5px;
                background-color: red;
            }
            #top #carname:focus{
                outline: 0;
            }
            #box2{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="top">
            <div id="middle">
                <input type="" name="" id="carname" value="" placeholder="请输入车牌号" />
                <button class="button" onclick="queryAction()">查询</button>
                <button class="button" onclick="delAction()">删除</button>
            </div>
        </div>
        <div id="box2"></div>
        
        <script type="text/javascript">
            result = ""
            function isTrafficControl(carNo){
                today = new Date()
                week = today.getDay()
                if (week == 0 && week == 6){
                    return false
                }
                //1.找到第一个数字字符
                numer = ''
                for(x=carNo.length-1;x>=0;x--){
                    ch = carNo[x]
                    if('0'<=ch && ch<='9'){
                        numer = ch
                        break
                    }
                }
                
                //2.日期对应的车牌号是否限行
                if(numer == week || numer==(week+5)%10){
                    return true
                }
                
                return false
            }
            
            //查询
            function queryAction(){
                //获取输入内容
                inputNode = document.getElementById("carname")
                carName = inputNode.value
                inputNode.value =''
                regular = /^[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼][A-Z][\dA-Z]{5}$/
                if (regular.test(carName) == false){
                    result = "不合法"
                }else{
                    if (isTrafficControl(carName)){
                        result = "限行"
                    }else{
                        result = "不限行"
                    }
                }
               
               //创建节点
               resultNode = document.createElement("div")
               resultNode.style =  'height:40px; font-size:25px'
               resultNode.innerText = "车牌" + carName + result 
               
             //添加节点
             box2Node = document.getElementById("box2")
             box2Node.appendChild(resultNode)
            }
            
            
            //清除
            function delAction(){
                box2Node.innerHTML=""
            }
            
        </script>
    </body>
</html>
4.png
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                border: 0;
            }
            #box1{
                border-bottom: 1px solid #808080;
                text-align: center;
                margin-top: 200px;
            }
            #box1 input{
                font-size: 40px;
                outline: none;
                text-align: center;
                border-bottom: 1px dotted #909090;
                margin-bottom: 10px;
                /*设置垂直方向的对齐方式*/
                vertical-align: middle;
            }
            #box1 button{
                width: 80px;
                height: 40px;
                color: white;
                background-color: red;
                font-size: 20px;
            }
            #box2{
                text-align: center;
                font-size: 35px;
            }
            
        </style>
    </head>
    <body>
        <!--=============html============-->
        <div id='box1'>
            <input type="text" name="" id="" value="" placeholder="请输入车牌号"/>
            <button id="btn1">查询</button>
            <button id="btn2">清除</button>
        </div>
        <div id='box2'></div>
        
        <!--=============js============-->
        <script type="text/javascript">
            //1.========获取需要的节点==========
            var carNumNode = document.getElementsByTagName('input')[0];
            var queryBtnNode = document.getElementById('btn1');
            var clearBtnNode = document.getElementById('btn2');
            var resultBoxNode = document.getElementById('box2');
            
            var reObj = /^[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼][A-Z]\s+[A-Z\d]{5}$/;
            
            
            //2.==========是否限行============
            function idTrafficControls(carNumber){
                //a.获取最后一个数字
                var isNumber = false;   //车牌号是包含数字
                for(var x=carNumber.length-1;x>=0;x--){
                    var number1 = carNumber[x];
                    //如果是数字
                    if(number1>='0' && number1 <= '9'){
                        isNumber = true;
                        break;
                    }
                }
                if(!isNumber){
                    return carNumber+'不是有效车牌号';
                }
                //b.判断数字是否限行: 1/6 - 1; 2/7 - 2  3/8 - 3  4/9-4  5/0-5
                //获取当前时间
                var now = new Date();
//              var year = now.getFullYear();  //年
//              var month = now.getMonth();   //月
//              var day = now.getDate();    //天/日/号
                //获取星期几
                var week = now.getDay(); 
                if(week > 5){
                    return carNumber+'今日不限行';
                }
                if(week == number1 || (week+5)%10 == number1 ){
                    return carNumber+'今日限行';
                }else{
                    return carNumber+'今日不限行';
                }
            }
            
            //3.===========查询===============
            queryBtnNode.onclick = function(){
                //a.获取输入框中的内容
                var carNum = carNumNode.value;
                //创建新的节点
                var newNode = document.createElement('p');
                
                //b.判断输入的车牌号是否符合要求:地名+大写字母 5个数字和字母混合
                //正则对象.test(字符串) - 匹配,返回值是布尔
                if(reObj.test(carNum)){
                    //判断车牌号是否限行
                    var message = idTrafficControls(carNum);
                    newNode.innerText = message;
                }else{
                    newNode.innerText = carNum+'不是有效的车牌号';
                }
                
                //c.添加节点
                resultBoxNode.appendChild(newNode);
            }
            
            //================4.清除=================
            clearBtnNode.onclick = function(){
                resultBoxNode.innerHTML = '';
            }
        </script>
        
        
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android Gradle使用总结
    版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaoyanj...
    勤奋的pangdunhu阅读 2,116评论 0赞 1
  • Gradle for Android（七） 创建任务和插件
    目前为止，我们已经学习了如何修改Gradle构建属性，以及如何运行任务。本章，我们会深入了解这些属性，并且创建我们...
    sollian阅读 2,699评论 0赞 8
  • oracle错误集合
    ORA-00001: 违反唯一约束条件 (.) 错误说明：当在唯一索引所对应的列上键入重复值时，会触发此异常。 O...
    我想起个好名字阅读 5,453评论 0赞 9
  • 与你相遇，好幸运
    周三下午，小姐姐Kiki在微信上问我地址，说买了一些小玩意要寄给我。有些意外，又有好久没见到小姐姐了。 没想到物流...
    叶薄荷阅读 554评论 2赞 5
  • 《诗意人生》
    当时间急切的跳过 十一点五十九分五十九秒 新的希望并扑面而来 将我抓回现实 断绝了与外界的任何联系 我明白 该休息...
    双脚量地球阅读 180评论 0赞 1