11.19 JS基础4

作业回顾与修改

页面输入一个5位数数字; 12345 ,我们验证一下这个数字是否为回文数

原有作业的缺漏：原来我理解错误，作答只能做死板的五位数回文判断，无法做其他（字母，中文，以及非五位数数字）判断。

<body>
<input type="text" id="num" placeholder="请输入一个数字" value="12321">
<input type="button" id="btn" value="判断是否回文">
<input type="text" id="result" value="" readonly>
<!--结果显示部分设置为只读，无法变化-->
<script>
    //原有作业的缺漏：只能做死板的五位数回文判断，无法做其他（字母，中文，以及非五位数数字）判断
    //修改时将输入的字符串切割为两部分，用i和j分别赋值为字符串最前和最后下标值（0和length-1），取到前后两部分，判断是否相等，足够灵活
    document.getElementById("btn").onclick = function () {
        //获取文本框的值
        let str = document.getElementById("num").value;
        //如果数据是数字格式
        //解决方案: 12321 =>字符串 =>number -> 数字拆分
        //解决方案: 12321 拿到了数据，这个文本框的值string,用字符串的方法来拆分 charAt(x)
        let length = str.length;//字符串长度

        //定义一个标记 因为循环里的条件判断未结束，不能做结果输出，用flag寄存到循环外面输出为好
        let flag = true; //是回文

        for (let i = 0, j = length - 1; i < parseInt(length / 2); i++, j--) {
            console.log(str.charAt(i));//str.charAt(i) 从前向后取
            console.log(str.charAt(j));//str.charAt(j) 从后向前取
            if (str.charAt(i) != str.charAt(j)) {
                flag = false;//不是回文
                break;//跳出循环体
            }
        }

        if (flag) {
            document.getElementById("result").value = str + "是回文";
        } else {
            document.getElementById("result").value = str + "不是回文";
        }
    }
</script>
</body>

亮点：将字符串切割成两部分，两两循环输出进行对比；用flag接收循环中的条件判断，以在循环外进行结果输出，足够灵活。

while循环

基本语法：

<script>
    //while

    let i =1;//1 变量定义初始化
    //2 小括号中 是条件
    //定义一个变量存放累加的和
    let sum = 0;
    while(i<=100){

        sum = sum + i;
        //3变量要变化
        i++;
    }
    console.log("sum:"+sum)

</script>

之前的练习用while改写：

<script>
    //while
    //1 . 猴子吃桃
//    猴子吃桃问题：猴子第一天摘下若干个桃子，当即吃了一半，还不过瘾，又多吃了一个。
//    第二天早上又将第一天剩下的桃子吃掉一半，又多吃了一个。
//    以后每天早上都吃了前一天剩下的一半多一个。
//    到第 10 天早上想再吃时，发现只剩下一个桃子了。
//    编写程序求猴子第一天摘了多少个桃子。
//    假设第8天 2*((1+1)*2+1)个 第9天 (1+1)*2个 10天1个
    let remain=1;//第10天剩下的1个
    let i=9;//从第九天开始倒算回第一天
    while(i>=1){//i其实就是计数器（counter）
        remain=(remain+1)*2;
        i--;
    }console.log(remain);

    //2. 小球问题
//    有一个弹力球，从100米的高度，落地后会弹起来.每次弹起的高度是原来高度的一半.
//    问，第10次落地后弹起来的高度是多少?
//    第10次落地的时候，这个小球经过的总的路程是多少米?
    let height=100;//初始高度100

    let path=height;//总路程先加这规律外的100米
    let j=1;
    while(j<=10){
        console.log("第 "+j+" 次落地时候经过的距离: "+path+" 米");
        height/=2;
        if(j!=10){
            path+=height*2;
        }
        j++;
    }console.log(path);

    //3. 水仙花数
//    寻找所有的水仙花数 水仙花数定义：
//    a、一定是三位数-->153是“水仙花数”，因为：153 = 13 + 53 + 33。
//    b、每一位的立方，加起来正好是这个数的本身，比如153=1*1*1 + 5*5*5 + 3*3*3；
    let k=100;
    while(k<=999){
        let g=k%10;//个位数
        let s=Math.floor(k/10%10);//十位数
        let b=Math.floor(k/100);//百位数
        if(k==g*g*g+s*s*s+b*b*b){
            console.log(k);
        }
        k++;
    }
</script>

do...while循环

<script>
    //do -while
    let i = 1;
    //do执行，先执行do{}内容.然后再判断条件，如果条件为true,则再次执行循环体。
    do{

        console.log("i :"+i);
        i++;

    }while(i<=10);

</script>

<script>
    //do -while
    let i = 1;
    //do执行，先执行do{}内容.然后再判断条件，如果条件为true,则再次执行循环体。
    do{

        console.log("i :"+i);

        i--;//死循环
    }while(i<1);

</script>

<script>
    let i =1;//1 变量定义初始化
    //2 小括号中 是条件
    //定义一个变量存放累加的和
    let sum = 0;

    do{
        sum = sum + i;
        //3变量要变化
        i++;
    } while(i<=100);
    console.log("sum:"+sum)

</script>

对JS循环的小总结：

三个循环中，for循环语法比较简洁，比较适合循环次数确定，先判断，再执行循环体。

while循环，比较适合循环次数不确定，先判断，再执行循环体。

do-while循环，先执行一次循环体，再判断条件。do-while不管条件是否成立，都会执行一次循环体。

嵌套循环

演示：

<script>
  //使用for循环来演示嵌套循环
    //外循环控制行
    let star = "";
    for(let i=1; i<=5 ;i++){
        //内部的循环称为内循环 每行打印几个*

        for(let j=1;j<=i;j++){
            //攒一个星星 , + 拼接
            star = star+"*";
        }
        star = star+"\r\n";

    }
  console.log(star);// log一次就是打印并且换行了

</script>

通过使用嵌套循环打印三角形的相关练习：

<script>
    //向左直角三角形
    for(let i=1;i<=10;i++){//控制外层
        for(let j=1;j<=i;j++){
            document.write("♥");
        }
        document.write("</br>");
    }
    //向右直角三角形
    for(let i=1;i<=10;i++) {//控制外层
        for(let j=1;j<=10-i;j++){
            document.write("&nbsp;&nbsp;");
        }
        for(let k=1;k<=i;k++){
            document.write("♥");
        }
        document.write("<br/>");
    }
    //向左倒直角三角形
    for(let i=10;i>=1;i--) {//控制外层 10 10 9 9 8 8
        for(let k=1;k<=i;k++){
            document.write("♥");
        }
        document.write("<br/>");
    }
    //向右倒直角三角形
    for(let i=10;i>=1;i--) {//控制外层
        for(let j=1;j<=10-i;j++){
            document.write("&nbsp;&nbsp;");
        }
        for(let k=1;k<=i;k++){
            document.write("♥");
        }
        document.write("<br/>");
    }
    //向左等腰三角形
    for (let i = 1; i <= 10; i++) {//控制外层
        for (let j = 1; j <= 10 - i; j++) {
            document.write("&nbsp;&nbsp;");
        }
        for (let k = 1; k <= i; k++) {
            document.write("♥");
        }
        document.write("<br/>");
    }
    for (let i = 10; i >= 1; i--) {//控制外层
        for (let j = 1; j <= 10 - i; j++) {
            document.write("&nbsp;&nbsp;");
        }
        for (let k = 1; k <= i; k++) {
            document.write("♥");
        }
        document.write("<br/>");
    }

    //菱形
    for (let i = 1; i <= 10; i++) {
        for (let j = 1; j <= 10 - i; j++) {
            document.write("&nbsp");
        }
        for (let j = 1; j <= i; j++) {
            document.write("♥");
        }
        document.write("<br>");
    }
    for (let i = 1; i <= 10; i++) {
        for (let j = 1; j <= i; j++) {
            document.write("&nbsp");
        }
        for (let j = 1; j <= 10 - i; j++) {
            document.write("♥");
        }
        document.write("<br>");
    }
</script>

（Ps：其中打印菱形掌握得还不算熟练，需要多加练习。。)

今天的暂时就到这儿。。

23:02:28 11/21/2021

posted on 2021-11-21 23:03 heyiyang1312 阅读(5) 评论(0) 收藏举报

刷新页面返回顶部

11.19 JS基础4

导航

公告