第5章 语句(1)

最新推荐文章于 2021-05-24 10:58:36 发布
最新推荐文章于 2021-05-24 10:58:36 发布
阅读量414 收藏 1
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/szmtjs10/article/details/102786735
版权

目录

  • JavaScript If…Else 语句
  • JavaScript switch 语句
  • JavaScript for 循环
  • JavaScript while 循环
  • JavaScript Break 和 Continue 语句

JavaScript If…Else 语句

条件语句用于基于不同的条件来执行不同的动作。

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中，我们可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

If 语句

只有当指定条件为 true 时，该语句才会执行代码。
语法

if (condition){    当条件为 true 时执行的代码}

请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

实例
当时间小于 20:00 时，生成问候 “Good day”：

if (time<20) { x="Good day"; }

x 的结果是：
尝试一下 »

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS教程</title>
</head>
<body>

<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction(){
        var x="";
        var time=new Date().getHours();
        if (time<20){
            x="Good day";
        }
        document.getElementById("demo").innerHTML=x;
    }
</script>

</body>
</html>

请注意，在这个语法中，没有 …else…。您已经告诉浏览器只有在指定条件为 true 时才执行代码。

If…else 语句

请使用 if…else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。
语法

if (condition){    当条件为 true 时执行的代码}else{    当条件不为 true 时执行的代码}

实例
当时间小于 20:00 时，生成问候 “Good day”，否则生成问候 “Good evening”。

if (time<20) { x="Good day"; } else { x="Good evening"; }

x 的结果是：
Good evening
尝试一下 »

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS教程</title>
</head>
<body>

<p>点击这个按钮，获得基于时间的问候。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction(){
        var x="";
        var time=new Date().getHours();
        if (time<20){
            x="Good day";
        }
        else{
            x="Good evening";
        }
        document.getElementById("demo").innerHTML=x;
    }
</script>

</body>
</html>

If…else if…else 语句

使用 if…else if…else 语句来选择多个代码块之一来执行。
语法

if (condition1){
    当条件 1 为 true 时执行的代码
}else if (condition2)
    {
        当条件 2 为 true 时执行的代码
    }
else
    {
      当条件 1 和 条件 2 都不为 true 时执行的代码
    }

实例
如果时间小于 10:00，则生成问候 “Good morning”，如果时间大于 10:00 小于 20:00，则生成问候 “Good day”，否则生成问候 “Good evening”：

if (time<10) { document.write("<b>早上好</b>"); } else if (time>=10 && time<16) { document.write("<b>今天好</b>"); } else { document.write("<b>晚上好!</b>"); }

x 的结果是：
晚上好!
尝试一下 »

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS教程</title>
</head>
<body>

<script type="text/javascript">
    var d = new Date();
    var time = d.getHours();
    if (time<10)
    {
        document.write("<b>早上好</b>");
    }
    else if (time>=10 && time<16)
    {
        document.write("<b>今天好</b>");
    }
    else
    {
        document.write("<b>晚上好!</b>");
    }
</script>
<p>
    这个例子演示了 if..else if...else 语句。
</p>

</body>
</html>

范例：

向右移动的熊猫
到达边缘后停止
到达边缘后反向
重复左右移动的飞鸟
X方向位置不断改变
小鸟影片剪辑添加监听事件

知识补充：编程中用到的知识从后面提前先学习一下
HTML DOM setTimeout() 方法
定义和用法
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
语法
setTimeout(code,millisec)
在这里插入图片描述

提示和注释
提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

实例：
点击上面的按钮。5 秒后会显示一个消息框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        function timedMsg()
        {
            var t=setTimeout("alert('5 seconds!')",5000)
        }
    </script>
</head>

<body>
<form>
    <input type="button" value="显示计时的消息框！" onClick = "timedMsg()">
</form>
<p>点击上面的按钮。5 秒后会显示一个消息框。</p>
</body>

</html>

实例：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        var c=0;
        var t;
        function timedCount()
        {
            document.getElementById('txt').value=c;
            c=c+1;
            t=setTimeout("timedCount()",1000);
        }
    </script>
</head>

<body>
<form>
    <input type="button" value="开始计时！" onClick="timedCount()">
    <input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>

</html>

不断重复执行的 setTimeout( )
setTimeout( ) 预设只是执行一次, 但我们可以使用一个循环方式, 使到一个setTimeout( ) 再启动自己一次, 就会使到第二个 setTimeout( ) 执行, 第二个又启动第三个, 这样循环下去, 这 setTimeout( ) 就会不断执行。
分析

   function timedCount()
           { 
                      document.getElementById('txt').value=c； 
                      c=c+1；
                      t=setTimeout("timedCount()",1000) ；
             }

每隔1000毫秒setTimeout(“timedCount()”,1000)函数调用自己一次。
在 JavaScript, 我们是使用这处说的方法使到一些事项不断执行, 其中一个用途是显示转动时间, 另一个用途是设定跑动文字
移动图片也是类似，只是显示秒数或文字变成图片对象的左边界增加。

跑动文字

  • offsetLeft：当前对象到其上级层左部的距离。
  • scrollLeft：对象左端滚动出显示范围距离的值。
  • offsetWidth：当前对象的宽度值。

一个是scrollTop；一个是scrollLeft
第一个代表页面利用滚动条滚动到下方时，隐藏在滚动条上方的页面的高度；
第二个代表页面利用滚动条滚动到右侧时，隐藏在滚动条左侧的页面的宽度

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS教程(安康学院数字媒体技术)</title>
</head>
<body>
<!-- js字体左右移动-->
<script type="text/javascript">
    function ScrollImgLeft(){
        var speed=50;  //设置调用时间
        var scroll_div = document.getElementById("scroll_div");  //获取left需要移动的div

        function Marquee(){
            if(scroll_div.scrollLeft>300)
                scroll_div.scrollLeft=0;
            else
                scroll_div.scrollLeft++;
        }
        var MyMar=setInterval(Marquee,speed);  //每多少秒调用一次该函数
        scroll_div.onmouseover=function() {clearInterval(MyMar);}  //鼠标移动停止移动事件
        scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);}  //离开运行移动
    }

</script>
<div id="gongao">
    <div style="width:500px;height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div" class="scroll_div">
        <div id="scroll_begin">
            欢迎来到前端技术专业，学习JavaScript语言，学习JavaScript语言，著名的网页脚本语言。
        </div>

    </div>
    <script type="text/javascript">setInterval(ScrollImgLeft(),1000);</script>
</div>
</body>
</html>

HTML DOM setInterval() 方法
setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

HTML DOM Style 对象

Style 对象

Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。

使用 Style 对象属性的语法：
document.getElementById(“id”).style.property=“值”
Style 对象的属性：
背景、边框和边距、布局、列表、杂项、定位、打印、滚动条、表格、文本、规范
在这里插入图片描述
HTML DOM marginLeft 属性
定义和用法
marginLeft 属性设置元素的左外边距。
在这里插入图片描述

向右移动的熊猫

setInterval(function(){
            div.style[fx]=i+"px";
            i++;
            },10)

每隔10毫秒，让div的外边界的左边界值增加1个px。

对象访问属性有两种方法 1、obj.paramName，使用.访问 2、obj[parameName]，使用中括号属性名访问
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js向右移动的熊猫</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        input{
            display: block;
            height:20px;
        }
        div{
            width: 93px;
            height:117px;
            background:#000;
        }
    </style>
</head>
<body>
<input type="button" value="运动">
<div><img src="images/panda.png"></div>
<script>
    var ipt=document.getElementsByTagName("input")[0];
    var div=document.getElementsByTagName("div")[0];
    var scr_w=document.documentElement.clientWidth;

    ipt.onclick=function(){
        fn1("marginLeft",scr_w);
    };
    function fn1(fx,size){
        var i=0;
        var t1=setInterval(function(){
            div.style[fx]=i+"px";
            i++;
            },10)
    }

</script>
</body>
</html>

向右移动的熊猫,到达右边界停止

setInterval(function(){
            div.style[fx]=i+"px";
            i++;
            if(i>size-100){
                clearInterval(t1);
            }
            },10)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js向右移动的熊猫,到达右边界停止</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        input{
            display: block;
            height:20px;
        }
        div{
            width: 93px;
            height:117px;
            background:#000;
        }
    </style>
</head>
<body>
<input type="button" value="运动">
<div><img src="images/panda.png"></div>
<script>
    var ipt=document.getElementsByTagName("input")[0];
    var div=document.getElementsByTagName("div")[0];
    var scr_w=document.documentElement.clientWidth;

    ipt.onclick=function(){
        fn1("marginLeft",scr_w);
    };
    function fn1(fx,size){
        var i=0;
        var t1=setInterval(function(){
            div.style[fx]=i+"px";
            i++;
            if(i>size-100){
                clearInterval(t1);
            }
            },10)
    }

</script>
</body>
</html>

到达边缘后反向

分析：碰撞到右边界前i++ ；碰撞后i–

setInterval(function(){

            div.style[fx]=i+"px";

            if(i>size-100){
                i--;
            }
            else{
                i++;
            }
            },10)

但运行出现错误，分析原因。

function fn1(fx,size){
        var i=0;
        var t1=setInterval(function(){
            div.style[fx]=i+"px";
            i++;
            if(i>size-100){
                clearInterval(t1);
                fn3("marginLeft",scr_w);
            }
        },10)
    }
    function fn3(fx,size){
        var i=size-100;
        var t1=setInterval(function(){
            div.style[fx]=i+"px";
            i--;
            if(i<0){
                clearInterval(t1);
                fn1("marginLeft",scr_w);
            }
        },10)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js到达边缘后反向</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        input{
            display: block;
            height:20px;
        }
        div{
            width: 93px;
            height:117px;
            background:#000;
        }
    </style>
</head>
<body>
<input type="button" value="运动">
<div><img src="images/panda.png"></div>
<script>
    var ipt=document.getElementsByTagName("input")[0];
    var div=document.getElementsByTagName("div")[0];
    var scr_w=document.documentElement.clientWidth;

    ipt.onclick=function(){
        fn1("marginLeft",scr_w);
    };
    function fn1(fx,size){
        var i=0;
        var t1=setInterval(function(){
            div.style[fx]=i+"px";
            i++;
            if(i>size-100){
                clearInterval(t1);
                fn3("marginLeft",scr_w);
            }
        },10)
    }
    function fn3(fx,size){
        var i=size-100;
        var t1=setInterval(function(){
            div.style[fx]=i+"px";
            i--;
            if(i<0){
                clearInterval(t1);
                fn1("marginLeft",scr_w);
            }
        },10)
    }

</script>
</body>
</html>

在这里插入图片描述

扩展

缓动效果

鼠标跟随

JavaScript switch 语句

使用 switch 语句来选择要执行的多个代码块之一。
在这里插入图片描述
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
案例
贪吃蛇

<!DOCTYPE html>
<canvas id="gc" width="400" height="400"></canvas>
<script>
    window.onload=function() {
        canv=document.getElementById("gc");
        ctx=canv.getContext("2d");
        document.addEventListener("keydown",keyPush);
        setInterval(game,1000/15);
    }
    px=py=10;
    gs=tc=20;
    ax=ay=15;
    xv=yv=0;
    trail=[];
    tail = 3;
    function game() {
        px+=xv;
        py+=yv;
        if(px<0) {
            px= tc-1;
        }
        if(px>tc-1) {
            px= 0;
        }
        if(py<0) {
            py= tc-1;
        }
        if(py>tc-1) {
            py= 0;
        }
        ctx.fillStyle="green";
        ctx.fillRect(0,0,canv.width,canv.height);

        ctx.fillStyle="lime";
        for(var i=0;i<trail.length;i++) {
            ctx.fillRect(trail[i].x*gs,trail[i].y*gs,gs-2,gs-2);
            if(trail[i].x==px && trail[i].y==py) {
                tail = 5;
            }
        }
        trail.push({x:px,y:py});
        while(trail.length>tail) {
            trail.shift();
        }

        if(ax==px && ay==py) {
            tail++;
            ax=Math.floor(Math.random()*tc);
            ay=Math.floor(Math.random()*tc);
        }
        ctx.fillStyle="white";
        ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2);
    }
    function keyPush(evt) {
        switch(evt.keyCode) {
            case 37:
                xv=-1;yv=0;
                break;
            case 38:
                xv=0;yv=-1;
                break;
            case 39:
                xv=1;yv=0;
                break;
            case 40:
                xv=0;yv=1;
                break;
        }
    }
</script>
szmtjs10
关注
专栏目录
JavaScript程序基础（五）条件语句
授业中寻找乐趣
03-15 1238
条件语句：就是满足一定条件后，选择执行，多为二选一或多选一。 下面用三个例子，学习掌握if语句和switch语句的用法。 1.在网页上，实现：如果时间小于 10:00，则生成问候 “早上好”，如果时间大于等于 10:00 小于 14:00，则生成问候 “中午好”，如果时间大于等于 14:00 小于 19:00，则生成问候 “下午好”，否则生成问候 “晚上好”。 <!DOCTYPE html> <html> <head> <title></title&g
js获取当前时间，小于10前边补0
du_5pet的博客
07-28 4739
var time = function(){ var date=new Date(); //年 var year=date.getFullYear(); //月 var month=(date.getMonth()+1)<10?"0"+(date.getMonth()+1):(date.getMonth()+1); //日 var day=date.getDate()<10?"0"+date.getDate():date.getDate(.
单片机数码管显示自行车里程c语言,项目实战：51单片机霍尔自行车里程测速仪设计升级版 原理图 程序 制作BOM...
weixin_36071371的博客
05-24 455
}}//==定时器0中断函数void time0_interrupt()interrupt 1{TL0 = (65536 - 5000) % 256;// 12M晶振，5ms定时TH0 = (65536 - 5000) / 256;display_function();time_counter++;time_counter8++;if(time_counter8 >= 1600)//大于8s...
js中的document.getElementById("id").style.property="值" 的用法
看不过的黑工坊
02-04 4839
转自：http://www.w3school.com.cn/jsref/dom_obj_style.asp http://www.w3school.com.cn/jsref/prop_style_display.asp
JavaScript 条件语句基础
松柏手记
03-26 527
条件语句用于基于不同的条件来执行不同的动作
第5章 语句1
08-03
本章主要讲解了不同类型的语句，包括简单语句、复合语句、条件语句、循环语句以及跳转语句，同时也涉及到了异常处理机制。 简单语句，尤其是表达式语句，是程序中最常见的形式。一个表达式语句由一个表达式加上一个...
第3章 Python常用语句.pptx
05-21
### 第3章 Python常用语句 #### 学习目标与主要内容 本章节主要围绕Python编程语言中的基础控制结构展开，具体涉及的知识点包括但不限于：判断语句（`if`）、循环语句（`while` 和 `for`）、以及其他辅助控制流的...
C语言程序设计教程第章基本语句.pptx
11-13
C语言程序设计教程第章基本语句 本资源主要讲解C语言程序设计的基本语句，包括二进制表示的数、基本数据类型及取值范围、标识符、变量和常量、基本运算符、表达式及运算的优先级、标准输入/输出函数简介和程序范例...
第八章用SQL语句操作数据.zip
08-27
本章我们将深入探讨如何使用SQL语句来操作数据。 1. **SQL基本结构** SQL语句通常包括SELECT、INSERT、UPDATE、DELETE等关键字，它们分别用于查询、插入、修改和删除数据。例如，`SELECT * FROM table_name`用于...
Python基础教程05第五章条件循环和其他语句ppt课件.ppt
最新发布
11-15
在Python的基础教程中，第五章主要讲解了条件、循环和其他重要的语句，这些是编程中最基础且至关重要的概念。 首先，我们来看看`print`和`import`两个语句。`print`用于在控制台输出信息，如果使用逗号分隔多个参数...
98.096.JAVA基础教程_Java基本语法-if-else课后练习1：笔试题(98).rar
11-08
98.096.JAVA基础教程_Java基本语法-if-else课后练习1：笔试题(98).rar
（6）javascript的程序控制结构及语句-----（1）条件判断
weixin_30569001的博客
12-07 142
程序控制结构及语句 编程就是将现实应用，转换为程序能够读得懂的语法语句。Javascript编程中对程序流程控制主要是通过条件判断语句、循环控制语句及continue、break来完成的，其中条件判断按预先设定的条件执行顺序，它包括if语句和switch语句；而循环控制语句则可以重复完成任务，它包括while语句、do...while语句及for语句。 一、条件判断语句： 条件判断语句就...
JavaScript条件、循环语句
lianghui0811
08-02 532
1、条件语句 1、if语句 1、条件语句用于基于不同的条件来执行不同的动作。 条件语句 通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。 在 JavaScript 中，我们可使用以下条件语句： if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码 if...else 语句 - 当条件为 true 时执行代码
读写HTML DOM style对象属性
drawlessonsfrom的博客
03-02 504
1、style对象属性的相关语法 style对象代表一个单独的样式声明。可从应用样式的文档或元素读取和设置style对象的属性值，使用style对象属性的语法如下： document.getElementById("id").style.property="值"; 对象代表一个单独的样式声明，其语法为element.style.property=“值”，style对象支持的属性有背景、边框和边距、布局、列表、杂项、定位、打印、滚动条、表格、文本和标准属性（dir、lang、title）。 2、style相
JavaScript学习笔记
weixin_44755735的博客
08-06 165
JavaScript学习笔记 1、 什么是JavaScript JavaScript 是互联网上最流行的脚本语言 历史 要了解JavaScript，我们首先要回顾一下JavaScript的诞生。 在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。 由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。 为什么起名叫JavaScr
JavaScript基础
Anonymous
12-26 1916
###### ###### 为什么学习 JavaScript? JavaScript web 开发人员必须学习的 3 门语言中的一门： HTML 定义了网页的内容 CSS 描述了网页的布局 JavaScript 网页的行为 #####JavaScript 简介 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电
JavaScript给按钮绑定点击事件（onclick）的方法及js常见事件
热门推荐
崔崇东的博客
02-05 9万+
本文实例讲述了JavaScript给按钮绑定点击事件（onclick）的方法。分享给大家供大家参考。具体分析如下： 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 html> head> script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } scri
重学前端之判断
YoungC
09-16 190
判断是js逻辑判断中最常见的一个方法，自己也是在空余的时间，将最基础的判断，进行了一下测试，来巩固自己的技能。接下来就将测试的一些代码简单的进行一下记录。 方便日后复习。 <body> <!--=============== If begin ====================--> <p>如果时间早于 20:00，会获得问候 "Good day"。</p> <button id="btn1"&g
MySQL第五章：SQL查询语句详解
"MySQL数据应用与开发第五章深入讲解了SQL查询的相关知识，涵盖了基本查询语句、单表查询、聚合函数、多表连接、子查询等重要内容，旨在提升数据库操作技能。" 在MySQL数据库应用与开发的第五章中，我们主要学习了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

szmtjs10

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值