备案控制台
开发者社区 开发与运维 文章 正文

JS(第八课)循环语句中常用到的案例(三)

2023-07-16 56
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JS(第八课)循环语句中常用到的案例(三)

案例九 判断上午下午

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            font-size: 40px;
            color: red;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        function one() {
            var time = new Date().getHours();
            var time = 18;
            if (time < 12) {
                document.write("Good Mornning")
            } else if (time > 12 && time < 20) {
                document.write("Good day you sey")
            } else {
                document.write("good evening!!");
            }
            var myDate = new Date();
            var a11 = myDate.toISOString();
            document.write(a11)
        }
    </script>
    <input type="submit" value="用户单机这里的信息才能弹出页面的上午还是下午" onclick="one()">
</body>
</html>

案例十 打印矩阵

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 打印表格一到一百的内容 -->
    <script>
        // 弹出表格信息
        //  document.write("<table align='center' border=3>");
        // 打印的排数 打印的是tr
        for (var i = 1; i <= 10; i++) {
            //  document.write("<tr height=70>");
            // 打印的是td
            for (var j = 1; j <= 10; j++) {
            }
            // 输出排号 座位号
            document.write("&nbsp;<br>")
        }
    //  document.write("</table");
    </script>
</body>
</html>

案例十一 打印座位号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table{
        background-color: rgb(175, 239, 183);
    }
    td{
        height: 100px;
        width: 200px;
        background-color: cornsilk;
    }
    td:hover{
        background-color: cadetblue;
        height: 50px;
        width: 40px;
        color: red;
    }
</style>
<body>
   <!-- 打印表格一到一百的内容 -->
    <script>
        // 弹出表格信息
        document.write("<table align='center' border=3>");
        // 打印的排数 打印的是tr
        for (var i = 1; i <= 100; i++) {
            document.write("<tr height=70>");
            // 打印的是td
            for (var j = 1; j <= 11; j++) {
                //输出
                document.write("<td align='center'>"+"编号"+ i+"</td>");
            }
            // 输出排号 座位号
            document.write("</tr>")
        }
        document.write("</table");
    </script>
</body>
</html>

案例十二 打印直角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 行数
        // for (var i = 0; i < 10; i++) {
            个数
            // for (var k = 0; k < 34; k++) {
                // document.write("*")
            // }
            // document.write("<br>")
        // }
    </script>
<!-- 心 -->
<!-- 心心 -->
<!-- 心心心 -->
    <script>
        document.write("<table border='1'>")
        for (var i = 1; i <=9; i++) {
            for (var j = 1; j<=i; j++) {
                document.write("*")
                 //输出“列*行=结果”
                    //    document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");
            }
            document.write("<br>")
        }
    </script>
</body>
</html>

案例十三 理解行 与单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=0009E265.png, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table {
        background-color: rgb(9, 231, 39);
    }
    td {
        height: 100px;
        width: 200px;
        background-color: cornsilk;
    }
    td:hover {
        background-color: rgb(24, 24, 24);
        height: 50px;
        width: 40px;
        color: red;
    }
    h1 {
        font-size: 100px;
        background-color: red;
    }
</style>
<body>
    <!-- 打印表格一到一百的内容 -->
    <script>
        // 弹出表格信息
        document.write("<table align='center' border=1>");
        // 打印的排数 打印的是tr
        for (var i = 1; i <= 6; i++) {
            document.write("<tr height=70>");
            // 打印的是td
            // for (var j = 1; j <= 11; j++) {
            //输出
            document.write("<td align='center'>" + "编号" + i + "</td>");
        }
        // 输出排号 座位号
        document.write("</tr>")
        // }
        document.write("</table");
    </script>
    <h1>理解行</h1>
    <script>
        // 弹出表格信息
        document.write("<table align='center' border=1>");
        // 打印的排数 打印的是tr
        // for (var i = 1; i <= 10; i++) {
        document.write("<tr height=70>");
        // 打印的是td
        for (var j = 1; j <= 6; j++) {
            //输出
            document.write("<td align='center'>" + "编号" + i + "</td>");
        }
        // 输出排号 座位号
        document.write("</tr>")
        // }
        document.write("</table");
    </script>
    <h1>理解解单元格</h1>
    <!-- 理解表格 -->
    <!-- 打印表格一到一百的内容 -->
    <script>
        // 弹出表格信息
        document.write("<table align='center' border=1>");
        // 打印的排数 打印的是tr
        for (var i = 1; i <= 6; i++) {
            document.write("<tr height=70>");
            // 打印的是td
            for (var j = 1; j <= 6; j++) {
                //输出
                document.write("<td align='center';>" + "编号" + i + "</td>");
            }
            // 输出排号 座位号
            document.write("</tr>")
        }
        document.write("</table");
    </script>
    <!-- 理解如何插入图片 -->
    <!-- 理解表格 -->
    <!-- 打印表格一到一百的内容 -->
    <script>
        // 弹出表格信息
        document.write("<table align='center' border=1>");
        // 打印的排数 打印的是tr
        for (var i = 1; i <= 6; i++) {
            document.write("<tr height=70>");
            // 打印的是td
            for (var j = 1; j <= 6; j++) {
                //输出
                // 打印出图片
                document.write("<td align='center';>" +"<img src='../for/img/download.png'>"+"</td>");
            }
            // 输出排号 座位号
            document.write("</tr>")
        }
        document.write("</table");
    </script>
</body>
</html>

案例十四  整除 10 23 45 67 89 四个数 用之前所讲 的if if else do while  for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // <!-- 3. 输入一个数，判断它是否能被3、5、9整除，注意考虑同时整除的情况 -->
        var num = prompt("请用户输入要输入的数字<br>");
        if (num % 3 === 0 && num % 5 && num % 9) {
            document.write("输入的数字能被3 5 9 整除整除<br>")
        } 
        if (num % 3 == 0 && num % 5 == 0) {
            document.write("输入的数字能被3 5整除<br>")
        }
        if (num % 5 == 0 && num % 9 == 0) {
            document.write("输入的数字能被 5 9整除<br>")
        }
        if (num % 3 == 0 && num % 9 == 0) {
            document.write("输入的数字能被 3 9整除<br>")
        }
        if (num % 3 === 0 || num % 5 == 0 || num % 9 == 0) {
            document.write("输入的数字能被3 5 9 中的一个数整除<br>")
        }
        if (num % 3 === 0) {
            document.write("输入的数字能被3整除<br>")
        }
        if (num % 5 === 0) {
            document.write("输入的数字能被5整除<br>")
        }
        if (num % 7 === 0) {
            document.write("输入的数字能被9整除<br>")
        }
    </script>
    <script>
    </script>
</body>
</html>

案例十五 6个数，求出其中的最大值，最小值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        font-size: 40px;
        color: red;
    }
</style>
<body>
      <!-- ! 定义6个数，求出其中的最大值，最小值 -->
<script>
var arr = [5, 8, 3, 4, 90,67];
function find() {
    var max = arr[0],
     min = arr[0];
    var maxindex = 0;
    var minindex = 0;
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i];
            maxindex = i;
        } else if (arr[i] < min) {
            min = arr[i];
            minindex = i;
        } 
    }
    document.write("最大值为：" + max + "位置为：" + maxindex);
    document.write("最小值为：" + min + "位置为：" + minindex);
}
</script>
<input type="submit" value="用户单机这里的信息求出其中的最大值，最小值 " onclick="find()">
<script>
    var n1=23,n2=90,n3=78,n4=34,n5=23,n6=90
    var max=n1
    if(max<n2)max=n2
    if(max<n3)max=n3
    if(max<n4)max=n4
    if(max<n5)max=n5
    if(max<n6)max=n6
</script>
</body>
</html>

案例十六 输出某年所有月份的天数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function All() {
            var year = prompt("请输入年份：", "")
            var yue = prompt("请输入月份：", "")
                switch (yue) {
                    case "1": case "3": case "5": case "7": case "8": case "10": case "12":
                        document.write("31天");
                        break;
                    case "4": case "6": case "9": case "11":
                        document.write("30天");
                        break;
                    case "2":
                        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                            document.write("闰年29天");
                        } else {
                            document.write("平年28天")
                        }
                }
        }
        // 调用函数 
        All();
    </script>
</body>
</html>

案例十七 打印空心三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function All() {
            var year = prompt("请输入年份：", "")
            var yue = prompt("请输入月份：", "")
                switch (yue) {
                    case "1": case "3": case "5": case "7": case "8": case "10": case "12":
                        document.write("31天");
                        break;
                    case "4": case "6": case "9": case "11":
                        document.write("30天");
                        break;
                    case "2":
                        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                            document.write("闰年29天");
                        } else {
                            document.write("平年28天")
                        }
                }
        }
        // 调用函数 
        All();
    </script>
</body>
</html>

案例 十八 跳转语句的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for (var index1 = 1; index1 <= 12; index1++) {
            if (index1 == 7) break;
            //    跳出循环
            document.write(index1 + "\n");
            document.write("<br>")
        }
        document.write("++++++++++++++++++++++++++++++++++++++++++++++++")
        for (var index = 1; index <= 12; index++) {
            if (index == 6) continue;
            //    跳出循环
            document.write(index + "\n");
        }
    </script>
</body>
</html>

案例 十九 异常的语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 异常一 -->
    <script>
        var str ="I LIKE Javascript";
        try {
           document.write(str.ghtu(5)); 
        } catch (exception) {
            alert("运行出现异常")
        }finally{
            alert("结束的try ...... catch.......... finally")
        }
    </script>
    <!-- 异常二 -->
    <script>
        var str1 ="I LIKE Javascript";
        try {
           document.write(str.charat(5)); 
        } catch (exception) {
            alert("错误的原因在"+exception.message+"错误的字符型是"+exception.name)
        }
    </script>
    <!-- 异常三 -->
    <script>
        try {
            var num=1/0;
            if(num==Infinity){
                throw new Error("除数步能为零")
            }
        } catch (exception) {
            alert(exception.message);
            document.write(exception.message)
        }
    </script>
</body>
</html>

案例二十  计算圆的面积和 周长

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 圆的面积</title>
    <style type="text/css">
      * {
        font-size: 30px;
        font-weight: bold;
      }
      .n {
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 30px;
      }
      .box1 {
        color: #F08080;
        background: #777777;
      }
      .box2 {
        color: #00A40C;
        background: #1E90FF;
      }
      .box3 {
        color: coral;
        background: darkorange;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <p class="n">圆的面积与周长</p>
      <label for="radius">圆的r</label>
      <input type="text" id="redius" />
    </div>
    <div class="box2">
      <label for="perimeter">圆的周长</label>
      <input type="text" id="perimeter" />
    </div>
    <div class="box3">
      <table>
        <label for="area">圆的面积</label>
        <input type="text" id="area" />
      </table>
    </div>
    <script>
      let radius = document.getElementById("redius"),
        perimeter = document.getElementById("perimeter"),
        area = document.getElementById("area");
      radius.oninput = function() {
        let r = radius.value;
        let res_perimeter = Math.PI * 2 * r;
        let res_area = Math.PI * Math.pow(r, 2);
        if (r == '0') {
          perimeter.value = '0';
          area.value = '0';
        } else {
          perimeter.value = res_perimeter.toString().substr(0, 4).concat('0');
          area.value = res_area.toString().substr(0, 4).concat('0');
        }
      }
    </script>
  </body>
</html>

文章标签：
JavaScript
关键词：
JavaScript案例
JavaScript循环语句
JavaScript循环语句案例
t75yjb52rsccc
目录
相关文章
众所周知
|
3天前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域，全局变量在所有地方可访问，局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型，如字符串、数字、布尔值，可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`，将字符串转为数值。
众所周知
18 1
穆雄雄.
|
3天前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——ccv.js
纯js实现人脸识别眨眨眼张张嘴案例——ccv.js
穆雄雄.
57 0
穆雄雄.
|
3天前
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——alive_face.js
纯js实现人脸识别眨眨眼张张嘴案例——alive_face.js
穆雄雄.
26 0
傻啦嘿哟
|
3天前
|
编解码 JavaScript 安全
JS逆向过程中中文编解码的小案例详解
JS逆向过程中中文编解码的小案例详解
傻啦嘿哟
10 1
程序员-刘华强
|
3天前
|
JavaScript 前端开发
JavaScript 条件循环语句（for 循环）
JavaScript 条件循环语句（for 循环）
程序员-刘华强
18 1
众所周知
|
3天前
|
JavaScript 前端开发
js的let、const、var的区别以及应用案例
【4月更文挑战第27天】ES6 中，`let` 和 `const` 是新增的变量声明关键字，与 `var` 存在显著差异。`let` 允许重新赋值，而 `const` 不可，且两者都具有块级作用域。`var` 拥有函数级作用域，并可在函数内任意位置访问。`let` 和 `const` 声明时必须初始化，而 `var` 不需。根据需求选择使用：局部作用域用 `let`/`const`，全局或函数范围用 `var`，不可变值用 `const`。
众所周知
24 2
快乐阿超
|
3天前
android-agent-web中js-bridge案例
android-agent-web中js-bridge案例
快乐阿超
22 2
源码世界
|
3天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构：Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言：C# 6.0、JavaScript 前端框架：JQuery、EasyUI、Bootstrap 后端框架：MVC、SQLSugar等 数 据 库：SQLserver 2012
源码世界
23 0
穆雄雄.
|
3天前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
穆雄雄.
11 0
穆雄雄.
|
3天前
|
JavaScript 前端开发
JavaScript操作BOM简单案例
JavaScript操作BOM简单案例
穆雄雄.
9 1

热门文章

最新文章

  • 1
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 4
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（七）(1)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 8
    【专栏】Vue.js和Node.js如何结合构建现代Web应用
  • 9
    JavaScript 权威指南第七版（GPT 重译）（一）(1)
  • 10
    JavaScript 权威指南第七版（GPT 重译）（五）(2)
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    147
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    18
  • 3
    描述 JavaScript 中的垃圾回收机制。
    23
  • 4
    如何使用 JavaScript 操作 DOM？
    20
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    22
  • 6
    JavaScript 中的数组方法有哪些？
    11
  • 7
    JS设置日期为0时0分0秒
    36
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    27
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    23
  • 10
    深入理解JavaScript中的闭包与作用域链
    10

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js完全自学手册图文教程
  • Vue.js 入门与实战

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考