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

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

2023-07-16 84
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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循环语句
JavaScript循环语句案例
t75yjb52rsccc
目录
相关文章
六卿
|
4月前
|
JavaScript 前端开发
JS循环for、for...of、for...in
本文介绍了JavaScript中不同的循环语句，包括传统的`for`循环、`for...of`循环用于遍历数组和类数组对象、`for...in`循环用于遍历对象的属性，并通过示例代码展示了它们的用法和区别。
六卿
61 6
JS循环for、for...of、for...in
尹正杰
|
4月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之while循环
这篇文章介绍了JavaScript中的while循环和do...while循环的基础知识，并通过一个实际案例演示了如何使用while循环计算投资增长到特定金额所需的年数。
尹正杰
72 2
JavaScript基础知识-流程控制之while循环
Li370234940
|
3月前
|
JavaScript 前端开发
js循环有几种
js循环有几种
Li370234940
55 0
小白学大数据
|
5月前
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
小白学大数据
438 2
阿福的工作室
|
5月前
|
JavaScript 前端开发
JavaScript中有哪几种循环？他们的运用场景在哪？
JavaScript中有哪几种循环？他们的运用场景在哪？
阿福的工作室
51 1
乐多_L
|
5月前
|
JavaScript 前端开发 索引
js的循环中foreach、for in和for of的区别
js的循环中foreach、for in和for of的区别
乐多_L
199 0
疯狂的猿
|
2月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画，js循环动画，简单的画面设计。非常丝滑有意思，欢迎对此代码感兴趣的朋友前来下载参考。
疯狂的猿
37 2
六卿
|
4月前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句，包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
六卿
162 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
尹正杰
|
4月前
|
JavaScript 前端开发
JavaScript基础知识-forEach循环
关于JavaScript基础知识中forEach循环的介绍。
尹正杰
64 1
JavaScript基础知识-forEach循环
游客j4mujezz7vm7y
|
4月前
|
JavaScript 前端开发 索引
js循环
js循环
游客j4mujezz7vm7y
73 1

热门文章

最新文章

  • 1
    Midscene.js：AI 驱动的 UI 自动化测试框架，支持自然语言交互，生成可视化报告
  • 2
    一个好看的小时钟html+js+css源码
  • 3
    如何使用Selenium处理JavaScript动态加载的内容？
  • 4
    带方向感知功能的js图片遮罩层插件
  • 5
    折腾之王：JavaScript之父Brave浏览器与BAT的诞生
  • 6
    Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式
  • 7
    页面滚动触发css3动画js插件
  • 8
    npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
  • 9
    捕获键盘输入和输入组合键的js库hotkeys
  • 10
    Node.js导入MongoDB具体操作指南
  • 1
    阿里云云效操作报错合集之遇到Node.js的内存溢出问题，该怎么办
    161
  • 2
    阿里云云效操作报错合集之Node.js构建报错，该如何排查问题
    146
  • 3
    Nest.js 实战 (三)：使用 Swagger 优雅地生成 API 文档
    172
  • 4
    Next.js静态出口生成策略深度解析
    110
  • 5
    Node.js搭建REST API实战：从基础到部署
    99
  • 6
    前端如何学习Node.js及Node.js的主要用途
    112
  • 7
    Vue.js组件通信策略详解
    68
  • 8
    网络爬虫开发：JavaScript与Python特性的小差异
    72
  • 9
    Nest.js 实战 (二)：如何使用 Prisma 和连接 PostgreSQL 数据库
    266
  • 10
    JavaScript 使用axios库发送 post请求给后端， 给定base64格式的字符串数据和一些其他参数， 使用表单方式提交， 并使用onUploadProgress显示进度
    532

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js完全自学手册图文教程
  • jQuery开发教程
  • Vue.js 入门与实战
  • 前端开发CSS基础

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云开通OSS存储服务详细流程