前端笔记12

循环语句

代码：
<!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>

数组去重

代码：
<!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>

字符串处理的方法

代码：
<!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>

字符串翻转

代码：
<!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>

计算器

代码：
<!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>

定时器弹框

代码：
<!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>

定时器的基本用法

代码：
<!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>

定时器的动画

代码：
<!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>

时钟

代码：
<!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>

倒计时

代码：
<!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>

变量的作用域

代码：
<!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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,332评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,508评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,812评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,607评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,728评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,919评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,071评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,802评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,256评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,389评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,032评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2赞 350

推荐阅读更多精彩内容