第一章 JavaScript基本语法
1：打印数字金字塔
训练技能点
变量的声明与赋值
使用for循环
需求说明
打印数字金字塔，效果如下图1.2.1所示。网页购物车代码
图1.2.1  打印指定高度为6层的数字金字塔
实现思路
（1）定义一个变量，赋值为数字金字塔的高度。
（2）使用嵌套for循环打印数字金字塔。
（3）声明i控制外重循环的层数。
（4）声明j控制内层循环，分别打印空格、递增的数字和递减的数字。
（5）空格使用” ”来打印。
关键代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打印数字金字塔</title>
<script language="javascript">
    // 为金字塔的高度赋值
    var height = 6;
   
    // 使用循环输出数字金字塔
    for(var i=1; i<=height; i++){
        for(var j=height-i; j>=1; j--){
            document.write("    ");
        }
        for(var j=1; j<=i; j++){
            document.write(j + "  ");
        }
        for(var j=i-1; j>=1; j--){
            document.write(j + "  ")
        }
        document.write("<br/>");
    }
</script>
</head>
<body>
</body>
</html>
2：打印三角形
训练技能点
嵌套for循环语句
if条件语句的使用
需求说明
编写JavaScript脚本实现输出图1.2.2和图1.2.3的图形。
图1.2.2输入数字为6的时候只需打印出倒三角形
图1.2.3输入数字为5的时候需要打印出倒三角形和正三角形
具体的要求如下：
指定一个变量并赋值。当输入的数字大于5的时候，输出图1.2.2所示的倒三角形，三角形的层数等于输入的数字值；当输入的数字小于或等于5的时候，输出图1.2.3所示的倒三角形和正三角形，倒三角形和正三角形的层数均等于输入的数字值。
实现思路
（1）指定一个变量并赋值。
（2）输出倒三角形。
（3）判断层数要求，当数字小于等于5的时候，再次输出正三角形，否则不再输出。
关键代码
<script language="javascript">
    // 输入打印三角形的层数
    // 当height大于5的时候，输出倒三角形
    // var height = 6;
    // 当height小于或者等于5的时候，输出倒三角形接着一个正三角形
    var height    = 5;
    // height为任何数都会打印出倒三角形
    for(var i=0; i<height; i++){
        for(var j=0; j<i; j++){
            document.write("    ");
        }
       
        for(var j=0; j<height - i; j++){
            document.write("*      ");
        }
       
        document.write("<br/>");
    }
   
    // 当height<=5的时候，再接着倒三角形的下端打印出正三角形
    if(height <= 5){
        for(var i=0; i<height; i++){
            for(var j=height-i-1; j>0; j--){
                document.write("    ");
            }
           
            for(var j=0; j<=i; j++){
                document.write("*      ");
            }
           
            document.write("<br/>");
        }
    }
</script>
3：函数的定义与调用
训练技能点
使用function关键字自定义函数
多重if语句
onload事件
需求说明
根据时间段显示不同的提示信息。参考的提示信息如下：
上午9点至下午5点，显示：你好，请用饱满的精神开始工作！
下午5点至晚上10点，显示：现在是下班后的自由时间，是继续充电呢还是娱乐一会儿？
晚上10点至次日5点，显示：辛勤劳作了一天了，该休息了！
次日早上6点至8点，显示：一日之计在于晨，清新的早晨来临了，早上好！
系统的提示信息如下图1.2.4和图1.2.5所示。
图1.2.4根据当前时间显示提示信息-1
图1.2.5根据当前时间显示提示信息-2
实现思路
（1）使用function关键字自定义函数welcome()。
（2）定义一个变量，表示当前的时间。
（3）使用多重if判断不同时间，通过alert()输出提示信息。
（4）使用window的onload事件调用welcome()函数。window的onload事件，当网页加载时候被触发，调用其关联的函数。
关键代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
    function welcome(){
        // 为时间变量赋值
        // 将time赋值为清晨的时间段
        // var time = 8;
        // 将time赋值为工作时间
        var time = 10;
        // 根据time的不同取值，弹出提示窗口
        if(time>=9 && time<=17){
            alert("你好，请用饱满的精神开始工作!");
        }else if(time>17 && time<23){
            alert("现在是下班后的自由时间，是继续充电呢还是娱乐一会儿？");
        }else if(time>=23 || time<6){
            alert("辛勤劳作了一天了，该休息了!");
        }else if(time>=6 && time<9){
            alert("一日之计在于晨，清新的早晨来临了，早上好!");
        }
    }
   
    // 页面加载完毕的时候，调用welcome函数
    load = welcome;
</script>
</head>
<body>
</body>
</html>
4：parseInt和parseFloat的应用-1

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。