美文网首页
HTML第十五天

HTML第十五天

作者: 精彩i人生 | 来源:发表于2018-06-25 19:14 被阅读0次

    1

      <!DOCTYPE html>
      <html lang="en">
      <head>
    <meta charset="UTF-8">
    <title>循环语句</title>
    <script type="text/javascript">
        /*
        循环语句:
            通过循环语句可以反复的执行一段代码多次
        
        while循环
            - 语法:
                while(条件表达式){
                    语句...
                }
        
            - while语句在执行时,
                先对条件表达式进行求值判断,
                    如果值为true,则执行循环体,
                        循环体执行完毕以后,继续对表达式进行判断
                        如果为true,则继续执行循环体,以此类推
                    如果值为false,则终止循环
        
        do...while循环
            - 语法:
                do{
                    语句...
                }while(条件表达式)
        
            - 执行流程:
                do...while语句在执行时,会先执行循环体,
                    循环体执行完毕以后,在对while后的条件表达式进行判断,
                    如果结果为true,则继续执行循环体,执行完毕继续判断以此类推
                    如果结果为false,则终止循环
        
                实际上这两个语句功能类似,不同的是while是先判断后执行,
                    而do...while会先执行后判断,
                do...while可以保证循环体至少执行一次,
                    而while不能
        for语句,也是一个循环语句,也称为for循环
            在for循环中,为我们提供了专门的位置用来放三个表达式:
                1.初始化表达式
                2.条件表达式
                3.更新表达式
        
        for循环的语法:
                for(①初始化表达式;②条件表达式;④更新表达式){
                    ③语句...
                }
        
                for循环的执行流程:
                    ①执行初始化表达式,初始化变量(初始化表达式只会执行一次)
                    ②执行条件表达式,判断是否执行循环。
                        如果为true,则执行循环③
                        如果为false,终止循环
                    ④执行更新表达式,更新表达式执行完毕继续重复②
        任意一种循环都可以互相嵌套
        */
        window.onload = function(){
            var oList = document.getElementById('list01');
            var aLi = oList.getElementsByTagName('li');
            /*for (var i = 0; i < aLi.length; i++) {
                if(i % 2 == 0){
                    aLi[i].style.background = 'gold';
                }
            }*/
            /*for(var j in aLi){
                aLi[j].style.background = 'red';
            }*/
            //创建一个循环,往往需要三个步骤
            //1.创初始化一个变量
            var j = 0;
            //2.在循环中设置一个条件表达式
            /*while(j < aLi.length){
                aLi[j].style.background = 'gold';
                //3.定义一个更新表达式,每次更新初始化变量
                j++;
            }*/
            do{
                aLi[j].style.background = 'gold';
                j++;
            }while(j < 0)
            /*
            以下是死循环的写法
            像这种将条件表达式写死为true的循环,叫做死循环
            该循环不会停止,除非浏览器关闭,死循环在开发中慎用
            可以使用break,来终止循环
            */
            /*while(true){
                if(j>10){
                    break;//退出整个循环
                }
                j++;
            }
            //for循环的死循环写法
            for(;;){
            }*/
            /*
            break关键字可以用来退出switch或循环语句
                不能在if语句中使用break和continue
                break关键字,会立即终止离他最近的那个循环语句
            continue关键字可以用来跳过当次循环
                同样continue也是默认只会对离他最近的循环循环起作用
             */
            /*
            可以为循环语句创建一个label,来标识当前的循环
                label:循环语句
            使用break语句时,可以在break后跟着一个label,
                这样break将会结束指定的循环,而不是最近的
             */
            outer:
            for(var i=0 ; i<5 ; i++){
                console.log("@外层循环"+i);
                for(var j=0 ; j<5; j++){
                    console.log("内层循环:"+j);
                    break outer;
                }
            }
        } 
    </script>
      </head>
      <body>
    <ul id="list01">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
      </body>
      </html>
    

    2

      <!DOCTYPE html>
      <html lang="en">
      <head>
    <meta charset="UTF-8">
    <title>数组去重</title>
    <script type="text/javascript">
        var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4];
        var aRr2 = [];
        for(var i=0; i<aRr.length; i++){
            //判断元素第一次出现的位置,恰好是当前索引时,就将元素放入新数组
            if(aRr.indexOf(aRr[i]) == i){
                aRr2.push(aRr[i]);
            }
        }
        alert(aRr2);//1,3,4,6,9,2,5
    </script>
      </head>
      <body>
    
      </body>
      </html>
    

    3

      <!DOCTYPE html>
      <html lang="en">
      <head>
    <meta charset="UTF-8">
    <title>字符串处理的方法</title>
    <script type="text/javascript">
        /*字符串切断转成数组*/
        var sTr = '2018-06-20';
        var aRr = sTr.split('-');
        // alert(aRr);//2018,06,20
        // console.log(aRr);
        var aRr2 = sTr.split('');
        // console.log(aRr2);
        /*实际上就是修改了<title>标签的内容*/
        // document.title = aRr2;
        var sTr2 = '#div1';
        var sTr3 = '.div1';
        /*获取指定索引的字符*/
        var sTr4 = sTr2.charAt(0);
        if(sTr4 == '#'){
            // alert('id选择器');
        }
        /*查看子串第一次出现的位置*/
        var sTr5 = 'Microsoft Yahei';
        var num = sTr5.indexOf('Yahei');
        // alert(num);//10
        var num2 = sTr5.indexOf('xihei');
        // alert(num2);//没有找到就弹出-1
        /*substring截取子串*/
        //从10开始,截到15(包括开始位置,不包括结束位置)
        // var sTr6 = sTr5.substring(10,15);//Yahei
        //从10开始截取到末尾
        var sTr6 = sTr5.substring(10);//Yahei
        // alert(sTr6);
        /*全部转为大写字母*/
        // alert(sTr6.toUpperCase());//YAHEI
        /*全部转为小写字母*/
        alert(sTr6.toLowerCase());//yahei
    </script>
      </head>
      <body>
    
      </body>
      </html>
    

    4

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
    <title>字符串反转</title>
    <script type="text/javascript">
        var sTr = "123asdf79888asdfe21";
        //1、split字符串转成数组
        //2、reverse数组反转
        //3、join数组转成字符串
        var sTr2 = sTr.split('').reverse().join('');
        alert(sTr2);//12efdsa88897fdsa321
    </script>
      </head>
      <body>
    
      </body>
      </html>
    

    5

      <!DOCTYPE html>
      <html lang="en">
      <head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <script type="text/javascript">
        window.onload = function(){
            var oInput01 = document.getElementById('input01');
            var oInput02 = document.getElementById('input02');
            var oSelect = document.getElementById('select');
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function(){
                var val01 = oInput01.value;
                var val02 = oInput02.value;
                //不做此判断会弹出“NaN”
                if(val01=="" || val02==""){
                    alert('输入框不能为空!');
                    return;
                }
                if(isNaN(val01) || isNaN(val02)){
                    alert('请输入数字!');
                    return;
                }
                switch(oSelect.value){
                    case '0':
                        alert((parseFloat(val01)*100 + parseFloat(val02)*100)/100);
                        break;
                    case '1':
                        alert((parseFloat(val01)*100 - parseFloat(val02)*100)/100);
                        break;
                    case '2':
                        alert((parseFloat(val01)*100) * (parseFloat(val02)*100)/10000);
                        break;
                    case '3':
                        alert((parseFloat(val01)*100) / (parseFloat(val02)*100));
                        break;
                }
            }
        }
    </script>
      </head>
      <body>
    <h1>计算器</h1>
    <input type="text" name="" id="input01" />
    <select id="select">
        <option value="0">+</option>
        <option value="1">-</option>
        <option value="2">*</option>
        <option value="3">/</option>
    </select>
    <input type="text" name="" id="input02" />
    <input type="button" name="" value="计算" id="btn" />
      </body>
      </html>
    

    6

      <!DOCTYPE html>
      <html lang="en">
      <head>
    <meta charset="UTF-8">
    <title>定时器弹框</title>
    <style type="text/css">
        .pop{
            width: 400px;
            height: 300px;
            background-color: #fff;
            border: 1px solid #000;
            /*固定定位*/
            position: fixed;
            /*左上角位于页面中心*/
            left: 50%;
            top: 50%;
            /*让div向左偏移半个宽度、向上偏移半个高度,使div位于页面中心*/
            margin-left: -200px;
            margin-top: -150px;
            /*弹窗在最上面*/
            z-index: 9999;
        }
        /*遮罩样式*/
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #000;
            left: 0;
            top: 0;
            /*设置透明度30%*/
            opacity: 0.3;
            filter: alpha(opacity=30);/*兼容IE6、7、8*/
            /*遮罩在弹窗的下面,在网页所有内容的上面*/
            z-index: 9990;
        }
        .pop_con{
            display: none;/*默认不显示,用定时器显示*/
        }
    </style>
    <script type="text/javascript">
        /*
        setTimeout      只执行一次的定时器
        clearTimeout    关闭只执行一次的定时器
        setInterval     反复执行的定时器
        clearInterval   关闭反复执行的定时器
        */
        window.onload = function(){
            var oPop = document.getElementById('pop');
            var oShut = document.getElementById('shutOff');
            /*setTimeout(showPop, 3000);//开启定时器,3秒后调用函数showPop()弹框
            function showPop(){
                oPop.style.display = 'block';//显示弹框和遮罩
            }*/
            //开启定时器的简写方式:调用匿名函数
            setTimeout(function(){
                oPop.style.display = 'block';
            }, 3000);
            oShut.onclick = function(){
                oPop.style.display = 'none';//关闭弹框和遮罩
            }
        }
    </script>
      </head>
      <body>
    <h1>首页标题</h1>
    <p>页面内容</p>
    <a href="http://www.baidu.com">百度网</a>
    
    
    <div class="pop_con" id="pop">
        <div class="pop">
            <h3>提示信息!</h3>
            <a href="#" id="shutOff">关闭</a>
        </div>
        <div class="mask"></div>
    </div>
      </body>
      </html>
    

    7

      <!DOCTYPE html>
      <html lang="en">
      <head>
    <meta charset="UTF-8">
    <title>定时器的基本用法</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript">
        //单次定时器
        var timer = setTimeout(function(){
            alert('hello!');
        }, 3000);
        //清除单次定时器
        clearTimeout(timer);
        //反复循环定时器
        var timer2 = setInterval(function(){
            alert('hi~~~');
        }, 2000);
        //清除反复循环定时器
        clearInterval(timer2);
    </script>
      </head>
      <body>
    
      </body>
      </html>
    

    8

      <!DOCTYPE html>
      <html lang="en">
      <head>
    <meta charset="UTF-8">
    <title>定时器动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            position: fixed;
            left: 20px;
            top: 20px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oBox = document.getElementById('box');
            var left = 20;
            //反复循环定时器,每30毫秒修改一次盒子的left值
            var timer = setInterval(function(){
                left += 2;
                oBox.style.left = left + 'px';
                //当left值大于700时停止动画(清除定时器)
                if(left > 700){
                    clearInterval(timer);
                }
            },30);
        }
    </script>
      </head>
      <body>
    <div class="box" id="box"></div>
      </body>
      </html>
    

    9

      <!DOCTYPE html>
      <html lang="en">
      <head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oBox = document.getElementById('box');
            function timeGo(){
                var now = new Date();
                // alert(now);//弹出美式时间:Wed Jun 20 2018 15:27:13 GMT+0800 (中国标准时间)
                var year = now.getFullYear();//2018年
                var month = now.getMonth() + 1;//6月弹出5//范围0-11
                var date = now.getDate();//20号
                var week = now.getDay();//3//星期几,西半球时间,范围0-6,星期日为一周的第一天,为0
                var hour = now.getHours();
                var minute = now.getMinutes();
                var second = now.getSeconds();
                // alert(hour + ":" + minute + ":" + second);//15:33:9
                oBox.innerHTML = '当前时间是:' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
            }
            timeGo();
            setInterval(timeGo, 1000);
        }
        //此函数将星期的数字转为汉字表示
        function toWeek(num){
            switch(num){
                case 0:
                    return '星期天'; 
                    break;
                case 1:
                    return '星期一'; 
                    break;
                case 2:
                    return '星期二'; 
                    break;
                case 3:
                    return '星期三'; 
                    break;
                case 4:
                    return '星期四'; 
                    break;
                case 5:
                    return '星期五'; 
                    break;
                case 6:
                    return '星期六'; 
                    break;
            }
        }
        //此函数将不足两位的数字前面补0
        function toDouble(num){
            if(num < 10){
                return '0' + num;
            }else{
                return num;
            }
        }
    </script>
      </head>
      <body>
    <div id="box"></div>
      </body>
      </html>
    

    10

      <!DOCTYPE html>
      <html lang="en">
      <head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <script type="text/javascript">
        window.onload = function(){
            //活动第二天要将页面下线,直接跳转到其它页面,不会走后面的代码了
            // window.location.href = "http://www.baidu.com";
            var oDiv = document.getElementById('div1');
            function timeLeft(){
                //实际开发中此时间从服务器获取,避免客户端调整时间
                var now = new Date();
                var future = new Date(2018,5,20,16,30,20);
                // alert(future - now);//弹出与当前时间相差的毫秒数:12469935436
                var milli = parseInt((future - now)/1000);
                //活动当天页面下线,避免倒计时到点后继续计负时
                // if(milli <= 0){
                //  //页面跳转,不执行下面的代码了
                //  window.location.href = "http://www.baidu.com";
                // }
                var day = parseInt(milli / 86400);
                var hour = parseInt(milli % 86400 / 3600);
                var minute = parseInt(((milli % 86400) % 3600) / 60);
                var second = milli % 60;
                oDiv.innerHTML = '距离2018年11月12日00时00分00秒还有' + day + '天' + toDouble(hour) + '时' + toDouble(minute) + '分' + toDouble(second) + '秒';
            }
            
            timeLeft();
            setInterval(timeLeft, 1000);
        }
        function toDouble(num){
            if(num < 10){
                return '0' + num;
            }else{
                return num;
            }
        }
    </script>
      </head>
      <body>
    <div id="div1"></div>
      </body>
      </html>
    

    11

      <!DOCTYPE html>
      <html lang="en">
      <head>
    <meta charset="UTF-8">
    <title>变量的作用域</title>
    <script type="text/javascript">
        /*
        全局变量:函数外部定义的变量,函数内部和外部都可以访问,它的值可以共享
        局部变量:函数内部定义的变量,函数内部可以访问,外部无法访问。函数内部访问变量时,先在内部查找是否有此变量,如果有,就使用内部变量,如果没有,就去外部查找
        函数内部如果不用'var'关键字定义变量,变量可能会变成全局变量,如果用严格模式解析会报错
        */
        var a = 12;
        function aa(){
            // var a = 5;
            var b = 7;
            // alert(a);
        }
        // alert(a);
        // alert(b);//报错
        aa();
    </script>
      </head>
      <body>
    
      </body>
      </html>

    相关文章

      网友评论

          本文标题:HTML第十五天

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