前端HTML+CSS+JS

标签	语义	说明
<h1>~<h6>	header	标题
<p>	paragraph	段落
<br>	break	换行
<hr>	horizontal rule	水平线
<div>	division	分割（块元素）
<span>	span	区域（行内元素）

列表：

有序列表

<ol>

<li>有序列表项</li>

</ol>

`无序：`

<ul type="列表项符号">

<li>无序列表项</li>

</ul>

定义：

<dl>

<dt>定义名词</dt>

<dd>定义描述</dd>

……

</dl>

表格：

表格 -->

表1 表格基本标签
标签	语义	说明
table	table（表格）	表格
tr	table row（表格行）	行
td	table data cell（表格单元格）	单元格

表2 表格结构标签
标签	语义	说明
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格

基本结构：

语法：

<table>

<caption>表格标题</caption>



<thead>

<tr>

<th>表头单元格1</th>

<th>表头单元格2</th>

</tr>

</thead>



<tbody>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

</tbody>



<tfoot>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

</tr>

</tfoot>

</table>

<table border="1" align="center"  height="200px" width="1200px" cellspacing="0">
        <th>姓名</th>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
       
        <tr>
            <td align="center">姓名</td>
            <td>学号</td>
            <td>性别</td>
        </tr>
        <tr align="center">
            <td>姓名</td>
            <td>学号</td>
            <td>性别</td>
        </tr>
    </table>

案例：各地区固定资产投资

  <table width="1200px" height="1000px" border="1" cellspacing="0">
       
        <!-- rowspan垂直合并 colapan 横向合并 (保留第一删其他)-->
        <tr>
            <th rowspan="2">地区</th>
            <th colspan="2">按总量分</th>
            <th colspan="2">按比重分</th>
        </tr>
        
        <tr>
            <th>每年初累计（亿元）</th>
            <th>比去年同期增长（%）</th>
            <th>自年累计（%）去年同期（%）</th>
            <th>去年同期（%）</th>
        </tr>

        <tr>
            <td>全国</td>
            <td>185526.0</td>
            <td>9.6</td>
            <td>100.0</td>
            <td>100.0</td>
        </tr>

        <tr>
            <td>东部地区</td>
            <td>96203.0</td>
            <td>10。3</td>
            <td>45.0</td>
            <td>44.5</td>
        </tr>

        <tr>
            <td>北京市</td>
            <td>2200.84</td>
            <td>7.0</td>
            <td>1.2</td>
            <td>1.2</td>
        </tr>

        <tr>
            <td>四川省</td>
            <td>5620.3</td>
            <td>10.5</td>
            <td>5.2</td>
            <td>5.1</td>
        </tr>
    </table>

CSS:

！important：用于指定样式的优先级。当一个样式被标记为!important时，它将覆盖其他普通样式的优先级

 <div style="color: brown;">行内</div>

<!-- 业内

 div{
        color: aquamarine;
    }

<div>业内</div>

 <link rel="stylesheet" href="7.7.css">

<!-- 标签选择器

有特定的名字 id（#）id=“” 类选择器（.） class=“” -->

<!-- <div>

 #mi{
       color: antiquewhite;
     }
    .li{
       color: bisque;
    }
    p{
        color: aquamarine;
    }
    #mm{
        color: blue;
    }

</div> -->

样式：

行高：margin

居中

边框：border：

 border: 1px solid yellowgreen;//多大 实线  颜色

实线：

border-style: solid

颜色：

border-color: yellow

宽度：

 border-width: 5px;

字体：

font-size：20px；

加粗：

font-weight: 200px;
        font-family: 宋体;

对齐：

 text-align: center;
        background-color: blueviolet;

边框圆角

 border-radius: 200px;

去下划线：

text-decoration: none;

悬停：

/* 悬停 */
    div:hover{
        width: 1000px;
        height: 2000px;
        border-color: bisque;
        /* 悬停时间 */
        transition: all 3s;
    }

转换块：

 display: block;

行高：

 line-height: 30px;

定义标准文本：

text-decoration: none

定位：

定位模型：子绝父相

position:

static:静态定位

relative:相对定位距离原来位置进行偏移

position: relative;

absolute:绝对定位

 /* 相对定位有块状属性 */
            position: absolute;

fixed:固定定位，脱标

行高：margin

居中

 margin: 0 auto;

案例 2：祝福墙：

css：

!-- 子绝父相 -->
<style>
    .z1{
        width: 1300px;
        height: 800px;
        background-color: beige;
        border: 1px solid yellowgreen;
        /* 居中 */
        margin:  0% auto;
        position: relative;
    }
    .z1>h1{
        text-align: center;
    }
    .z1>.b1{
        width: 200px;
        height: 300px;
        /* border: 1px dashed red;
        background-color: aqua; */
        position: absolute;
    }
    /* 悬停 */
     /* 鼠标悬浮到某个卡片，提升z轴权重 */
     .b1:hover{
            z-index:9;
     }
    .a1{
        border: 1px dashed rgb(163, 103, 103);
        background-color: aqua;
        
        left: 40px;
        top: 50px;
    }
    .a2{
        border:1px dashed yellow;
        background-color: yellow;
       
        left: 1000px;
        top: 70px;
    }
    .a3{
        border: 1px dashed red;
        background-color: rgb(206, 206, 29);
        
        left: 100px;
        top: 80px;
    }
    .a4{
        border:1px dashed    rgb(199, 63, 176);
        background-color: aliceblue;
        right: 200px;
        top: 100px;
    }
    .a5{
        border:  1px dashed rgb(145, 137, 118);
        background-color: blueviolet;
        
        left: 50px;
        top: 100px;
    }

</style>

<body>
    <div class="z1">
        <h1 >祝福墙</h1>
        <div class="b1 a1">
            <h1>To tommy:</h1>
            <p>abidbbd hiahdowhd haohw ahiow</p>
        </div>
        <div class="b1 a2">
            <h1>To tommy:</h1>
            <p>abidbbd hiahdowhd haohw ahiow</p>
        </div>
        <div class="b1 a3">
            <h1>To tommy:</h1>
            <p>abidbbd hiahdowhd haohw ahiow</p>
        </div>
        <div class="b1 a4">
            <h1>To tommy:</h1>
            <p>abidbbd hiahdowhd haohw ahiow</p>
        </div>
        <div class="b1 a5">
            <h1>To tommy:</h1>
            <p>abidbbd hiahdowhd haohw ahiow</p>
        </div>
    </div>
</body>

案例3：垂直菜单

思路：

/* 原理：

1、先写列表一级列表嵌套着二级列表

<ul>

<li>

<a>一级</a>

</li>

<ul>

<li>二级</li>

<li>二级</li>

</ul>

2、设置共同样式(行高背景颜色高度居中转换成块状) 单独设置一级列表的样式

3、动画：先隐藏二级标签块当点上的时候出现块状

*/

css:

   *{
            padding: 0px;
            margin: 0px;
        }
        li{
            list-style: none;
        }
        ul.menu{
            border: 1px solid rebeccapurple;
            width: 200px;
        }
        ul.menu a{
            line-height: 20px;
            text-align: center;
            color: aqua;
            height: 30px;
            /* 块状 */
            display: block;
            /* 去下划线 */
            text-decoration: none;
        }

        
        ul.menu >li> a{
            color: blue;
            background-color: black;
        }
        ul.menu ul{
            /* 隐藏二级 */
            display: none;
        }
        ul.menu li:hover ul{
            display: block;
        }
    </style>

html:


        <ul class="menu">
            <li>
                <a href="">一级菜单1</a>
                <ul>
                    <li><a href="">二级菜单1</a></li>
                    <li><a href="">二级菜单2</a></li>
                    <li><a href="">二级菜单3</a></li>
                </ul>
            </li>
       
        
            <li>
                <a href="">一级菜单2</a>
                <ul>
                    <li><a href="">二级菜单1</a></li>
                    <li><a href="">二级菜单2</a></li>
                    <li><a href="">二级菜单3</a></li>
                </ul>
            </li>
        
        
            <li>
                <a href="">一级菜单3</a>
                <ul>
                    <li><a href="">二级菜单1</a></li>
                    <li><a href="">二级菜单2</a></li>
                    <li><a href="">二级菜单3</a></li>
                </ul>
            </li>
        </ul>

清除浮动坍塌：

 /* 如果hidde出问题1直接设高度 */
           overflow: hidden;

线性渐变：

 /* 线性渐变  从上往下*/
        background-image: linear-gradient(red, yellow,blue,black);
/* 设置方向 to top，to left
        background-image: linear-gradient(to top,red, yellow, black,blue) ; */

盒子阴影：

 box-shadow: 10px 5px 10px gray;

使用图片创建边框：

 border-image-source: url(img);

表单：

语法：

<form action="">

姓名：

<input type="text" name="xm" id="xm"><br>

邮箱：

<input type="email" name="yx" id="yx"><br>

颜色：

<input type="color" name="ys" id="ys"><br>

网站：

<input type="url" name="wz" id="wz"><br>

滑动：

<input type="range" name=" hd" id="hd"><br>

日期：

<input type="date" name="rq" id="rq"><br>



<input type="submit" value="免费注册">

</form>

指定类型改变：

 /* first-of-type\last-of-type\nth-of-typpe()指定类型的第几个(first)进行改变 */
    .box h1:first-of-type{
        color: rebeccapurple;

    }
    .box h1:last-of-type{
        color: red;
    }
    .box h1:nth-last-child(2){
        color: bisque;
    }

    /* 父级的第几个进行变化/不受样式控制 */
    .box :nth-child(2){
        color: aquamarine;
    }
    .op :nth-child(3n){
        color: violet;
    }
    .op :nth-child(4n+1){
        color: blue;
    }

动画：

2D位移：

变换属性：transform: translate

translateX、translateY 和 translateZ，用于在水平、垂直和深度方向上移动元素。

 #max:hover{
             /* 自身的50%  */
            transform: translate(50%,50%);
             transform: translate(100px,100px); 
         }

2D旋转：

 transform:rotate3d(1,1,1,90deg);

案例3：

3D立体正方形：

css：

 *{
            margin: 0;
            padding: 0;
            perspective: 1000px;
        }
        #box{
            width: 200px;
            height: 200px;
            border: 1px dashed blue;
            margin: 100px auto;
            position: relative;
            
            /* 设置子元素呈现3d效果 */
            transform-style: preserve-3d;
            transform: rotateY(45deg);
        }
        #box div{
            width: 200px;
            height: 200px;
            background-color: violet;
            /* 透明度 */
            opacity: 0.8;
            position: absolute;
            font-size: 100px;
            line-height: 200px;
            text-align: center;
        }
        .b1{
            transform: translateZ(100px);
        }
        .b2{
            transform: translateY(100px) rotateX(90deg);
        }
        .b3{
            transform: translateZ(-100px) ;
        }
        .b5{
            transform: translateX(-100px) rotateY(-90deg);
        }
        .b6{
            transform: translateY(-100px) rotateX(90deg);
        }
        .b4{
            transform: translateX(100px) rotateY(90deg);
        }

html：

 <div id="box">
        <div class="b1">1</div>
        <div class="b2">2</div>
        <div class="b3">3</div>
        <div class="b4">4</div>
        <div class="b5">5</div>
        <div class="b6">6</div>
    </div>

js：

1、变量：定义和使用

var 变量名=“”

  var name=prompt("请输入你喜欢的第一种事物")
        var mei=prompt("请输出第二种喜欢事物")
        var li =prompt("请输入第三种事物")

输出：

1、页面

document.write("第一种"+name)

2、控制器

 console.log("第二种"+mei)

3、弹窗

alert("第三种"+li)

2、数据类型

字符串：带“”叫字符串

对象：包含很多复杂的东西，new Date 空：null

数值：

布尔：ture false

未定义：

undefined：

定义变量

var aaa;

没给变量赋值，此时访问变量，内容是undefined，类型也是undefined-->

  var aaa;
        document.write(aaa+" "+typeof(aaa)+"<br>");

js的使用：

页内、引用

页内：

 <script>
        // 定义一个变量
        var mingzi="孙悟空"
        //使用内置对象document将变量内容，写到文档中
        document.write(mingzi)
    </script>

 <!-- 内部2 -->
    <script>
        //定义也给省份，将省份的内容，通过消息提示框，弹出提示
           var pro="湖北省"
       //使用系统函数，弹出提示内容
       alert(pro)
       </script>

引入：

  <!-- 引入外部js文件: 注意引入外部js文件的时候，script内部不能写其它代码 -->
    <script src="/js/页面弹框.js">

    </script>

// 定义
var num1="40"
var num2="10"
//使用alter弹出两个变量
alert(num1-num2)

赋值运算：

1. 简单赋值: =

2. 增强赋值: +=,-=,*=,/=,%=

 var n1=10;
        var n2=20;
        n2-=20;
        document.write(n2+"<br>");
        n2+=20;
        document.write(n2+"<br>");
        n2*=20;
        document.write(n2+"<br>");
        n2%=20;
        document.write(n2+"<br>");

关系运算：

两个数据相互之间的关系

<, >, <= , >= ,== ,(!==,=== 数值和数据类型都得是一样的)

var a=10;
        var b=8;
        document.write(a==b)
        document.write("<br>")

        document.write(a!=b)
        document.write("<br>")

        document.write(a>b)
        document.write("<br>")

        document.write(a>=b)
        document.write("<br>")

        document.write(a<=b)
        document.write("<br>")

        document.write(a<b)
        document.write("<br>")

逻辑运算：

&&(逻辑与), ||(逻辑或), !(逻辑非)

用来连接多个关系运算(关系条件)

比如：

数学大于90,买自行车

数学大于90,语文等于100，表示多个条件的场景就要用逻辑运算符来连接

逻辑或：连接的多个关系运算，如果有一个成立，则逻辑或的结果为true，否则为false

document.write(5>1 || 1<0);
        document.write("<br>");

//逻辑与: 连接的多个关系运算，全部都成立，则逻辑与的结果为true，否则为false

document.write(5>1 && 1<0);
        document.write("<br>");

//逻辑非: 对表达式结果取反

document.write(!(5>1));

运算符优先级

()-> 单目运算(++,--,!)->算术运算(*/ +-)->关系运算(>,>=,<,<=,==,!=)->逻辑运算(&& ||)->赋值(=)

 var f = 13-8*2>9/3==5 && !(5<0) || 45-7<9+2 && 4/2==8+9 && !true;
        document.write(f);
 //   13-8*2>9/3==5 && true || 45-7<9+2 && 4/2==8+9 && false
        //    -3 > 3==5 && true ||  38<11  &&  2==17 && false
        //    false==5 && true ||    false &&  false && false
        //      false && true ||   false &&  false && false
         //          false ||   false
         //          false

三目运算符：

 var a=prompt("成绩多少");
        // 需要接受值

        var res= a<720 ?"进入南翔":"进入清华"
        
        document.write(res);

  var a=Number(prompt("输入一个数值"));

        var res=(a/2)==0? "偶数":"奇数";

        document.write(res);

  var a=Number( prompt("输入数值"));
        var b=a>0,a=0? "正数": "负数";
        document.write(b);

数据转换：

转换的前提：

当我们从输入框，或表单元素中获取数据的时候，数据类型默认是字符串

所以进行数值运算的时候，需要先做类型转换，将字符串类型转换成数值类型；

转换方式：

parseInt(字符串)：字符转整数，转整数数据，转不成NaN；

parseFloat（字符串）；字符转数据，转小数数据。

Number(数据)；将其他1类型的数据，尝试转为数据。转换失败返回NaN（ not a numb

var s="100";
        document.write(s+" "+typeof(s));
        document.write("<br>");

patseInt:将s中内容转为整数

 s=paresInt(s);
        document.wrte(s+" "+typeof(s));
        dounment.write("<br>");

parseFlaot:可以将s中的内容，转1为小数

s=parseInt(s);
        document.write(s+" "+typeof(s));
        document.write("<br>");

Number(v):可以将s中的内容，转为数值（整数，小数）

var v="100.234";
        document.write(v+" "+typeof(v));
        document.write("<br>");

将内容转为数值

v =Number(v);
        document.write(v+" "+typeof(v));
        document.write("<br>");

运算符：

当--在后时先进行其他运算将n1值直接给n2 n2输出自己再进行--运算输出-->

当--在前时先-- 将n1值给n2 等于n1的值

  <script>
        var n1=10;
        var n2=--n1;
        document.write(n1+" "+n2)



        var n1=13;
        var n2=++n1;
        document.write(n1+" "+n2);
    </script>

if分支：

var many=Number(prompt("输入兜里有多少"));
        if(many>=10){
            document.write("吃烤串");
         }else{
            document.write("喝西北风");
         }

判断正数还是负数
         var n1=Number(prompt("输入数值"));
         if(n1>0){
             document.write("是正数");
         }else{
             document.write("负数")
         }

判断是否闰年
         对于需要判断运算符的内容需写完
         var b2=Number(prompt("输入数值"));
         if(b2/4==0 && b2/100!==0){  
             document.write("是闰年"); 
        }else{
             document.write("不是闰年");
        }

 // 判断负数，正数，0
        var n3=Number(prompt("输入数值"));
        if(n3>100){
            document.write("爆错误")
        }else if(n3>0){
            document.write("是正数")
        }else if(n3<0){
            document.write("是负数")
        }else{
            document.write("是0")
        }

案例：

水仙花束：

var sx=prompt("输入三个数");

       
        var bw=parseInt(sx/100);
        var gw=sx%10;
        var sw=parseInt((sx%100)/10);

        document.write("百位是"+bw+"<br>");
       document.write("十位是"+sw+"<br>");
        document.write("个位是"+gw+"<br>");

        var res=bw*bw*bw+gw*gw*gw+sw*sw*sw;
        var res1=res==sx?"是水仙花束":"不是水仙花束";
        document.write(res1)

判断优良中差：

 var a=Number(prompt("输入分数"));

        if(a>100||a<0){
            document.write("成绩无效");
        }else if(a>=90){
            document.write("优秀")
        }else if(a>=80){
            document.width("良好")
        }else if(a>=70){
            document.write("美好")
        }else if(a>=60){
            document.write("合格")
        }else{
            document.write("不合格")
        }

swich case：

一周吃啥：

var ca=Number( prompt("请输入周几"));
        switch(ca)
        {
            case 1:
            case 2:
                document.write("吃面条");
                break;
            case 4:
            case 3:
                document.write("吃面条");
                break;
            case 5:
            case 6:
                document.write("吃饺子");
                break;
            case 7:
                document.write("不吃");
                break;
            default:
                document.write("输出错误");
                break;
        }

  var jiaot=(prompt("输入交通工具"));
        var den=prompt("输入灯颜色")
        if(den=="红灯"){
           document.write("停止")
            switch(jiaot){
                case "步行":
                    document.write("人行道");
                    break;
                case "私家车":
                    document.write("机型车道");
                    break;
                case "自行车":
                    document.write("非机型车");    
         }
        }else if(den=="绿灯"){
              document.write("通行")
            switch(jiaot){
                case "步行":
                    document.write("人行道通过");
                    break;
                case "私家车":
                    document.write("机型车道通过");
                    break;
                case "自行车":
                    document.write("非机型车通过");    
            }
        }else if(den=="黄灯"){
              document.write("等待")
              switch(jiaot){
                case "步行":
                    document.write("人行道等待");
                    break;
                case "私家车":
                    document.write("机型车道等待");
                    break;
                case "自行车":
                    document.write("非机型车等待");    
            }
        }

while循环：

正序输出：

 var i=1;
       while(i<=10){
        document.write("第"+i+"循环");
        i++;//2
       }

倒序100到1

var i=100;
    while(i>=1){
        document.write(i+"<br>");
        i--;
    }

// 计算1-100的和

var a=0;
        var sum=0;
        while(a<=100){
            sum+=i;
            i++;
        }
        document.write("和是"+sum);


        // 折纸，纸的厚度为0.0002  珠穆朗玛峰的高度位8848  这张纸折叠多少次，能抄过8848
        
    //    var i=1;
    //     while(true){
    //         if(i*0.0002>8848){
    //             break;
    //         }
    //         i++;
    //     }
    //     document.write("需要用"+i);

不定时循环：

吃包子：

var i=0;
       while(true){
        document.write("吃包子");
        var b=prompt("吃饱了吗");
        if(b=="吃饱了"){
            break;
        }
        i++;
       }
       document.write("吃了"+i+"个包子");

// //向银行存10000元，年利率百分之2，问存多少年，本息和达到10万

//10000*（1+0.002）

 var a=0;
    var m=10000;
    while(true){
        m=m*(1+0.002);
        a++;
        if(m>100000){
            break;
        }
    }
   
    document.write("存了"+a+"达到10w"+m);

循环：

 //从1加到10,输出当和大于20的时候，加的那个数是几?
       var i=1;
       var sum=0;
       var x=0; //记录和超过20的时候，那个数是几
       while(i<=10){
        sum+=i
        if(sum>20&&x==0){
            x=i;
        }
        i++
       }
       document.write("当加了"+x+"之后,超过了20<br>");
       document.write("1....10的和"+sum);

循环关键词：

循环控制关键字：break，continue

 // 输出1...10个数

        // 1.计数变量
        var i=1;

        // 条件判断
        while(i<=10){

            // 代码功能
            if(i==5){
                // break;  //遇到break循环结束

                // 遇见continue,本次循环continue后面的代码不执行,直接进入下一个循环
                i++;
                continue;
            }

            // 计数变量更新
            i++;
        }

do-while：

  // 先执行,再判断.即便条件不成立,也至少执行一次
        var i=11;
        do{
            document.write(i+"<br>");
            i++;
        }while(i<=10);

for：

// 固定次数循环4要素

// 1.计数变量

// 2.条件判断

// 3.循环体

// 4.计数变量更新

正序：

for(var i=0;i<=100;i++){
            document.write(i);
        }

倒序：

for(var i=0;i<=100;i--){
          document.write(i);
        }

1.100的偶数

for(var a=0;a<=100;a++){
            if(a%2==1){
                document.write(a)
            }
         }

1.。00奇数

 for(var i=0;i<=100;i++){
            if(i%2==1){
                document.write(i)
            }
          }

求和：

var b=0;
        // for(a=1;a<=10;a++){
        //     b+=a; 
        // }
        // document.write(b+"<br>")

        // 求100-200的和
        // var b=0;
        // for(a=100;a<=200;a++){
        //     b+=a;
        // }
        // document.write(b+"<br>")

所有：

 var a=0;
        // var b=0;
        // var sum=0
        // for(i=1;i<200;i++){
        //     if(i%2==0&& i<=100){
        //         document.write("偶数"+i+"<br>");
        //     }else if(i%2==1&& i<=100){
        //         document.write(i+"<br>")
        //     }
        //     if(i>=100){
        //         sum+=i
        //         document.write("和"+sum);
        //     }
        // }

扩展：

矩形：

for(var i=1;i<=5;i++){
           for(var a=1;a<=5;a++){
                document.write("*")
           }
            document.write("<br>")
        }

三角形：

for(var i=1;i<=5;i++){
            for(var b=1;b<=i;b++){
                document.write("*")
            }
            document.write("<br>")
        }

三角形靠右：

 for(var o=1;o<=5;o++){
          // 先空格
      for(var m=1;m<=5-o;m++){
              document.write("&nbsp;")
            }
            // 在输出
           for(var b=1;b<=o;b++){
                document.write("*")
           }
           document.write("<br>")
        }

九九乘法表：

 for(var m=1;m<=9;m++){
        for(var b=1;b<=m;b++){
            document.write("<span>")
            document.write(m+"*"+b+"="+(m*b));
            document.write("</span>")
        }
        document.write("<br>")
       }


        for(var j=1;j<=5;j++){
            // 先写空格
            for(var a=1;a<=5-j;a++){
                document.write("&nbsp");
             }
            // 再写星星
             for(var b=1;b<=j;b++){
                 document.write("*")
            }
             document.write("<br>")
         }

乘法表：

 for(var j=1;j<=9;j++){
             for(var a=1;a<=9-j;a++){
                 document.write("<span>")
                document.write("&nbsp");
                 document.write("</span>")
            }
             for(var m=1;m<=j;m++){
                 document.write("<span>")
                 document.write(j+"*"+m+"="+(j*m));
                 document.write("</span>")
             }
             document.write("<br>")
         }

测试：

 var sum=0;
        var flag=true;//记录输入分数是否有出错
        for(var a=1;a<=5;a++){
            // 判断是否有错误
            var m=Number(prompt("输入成绩"));
            if(m>100||m<0){
                flag=false;
                // 中断循环
                break;
            }
            sum+=m;
        }
        // i==6时，正确程序走完，输入5次分数if（i==6）{}
        if(flag){
            document.write("总和："+sum+"平均值"+sum/5)
        }else{
            document.write("输入错误")
        }

双重循环：

for(var y=2020;y<=2021;y++){
            document.write(y+"年");
            for(var yue=1;yue<=12;yue++){
                document.write(yue+"月")
            }
            document.write("<br>")
        }

素数：

 // 判断是否是质数，（只能被1和本身整除的是，被其他整除就是合数）
        var m=Number(prompt("输入"))
        var flag=true;
        for(var i=2;i<=m-1;i++){
            if(m%i==0){
                flag==false;
                break;
            }
        }
        if(flag){
            document.write("质数");
        }else{
            document.write("合数");
        }

统计人：

var a=0;
        var flag=true;
        for(var i=1;i<=5;i++){
            var n=Number(prompt("输入"));
            if(n>100||n<0){
                flag=false;
                break;
            }
            if(n>80){
                // a++;
                continue
            }
            a++
        }
        if(flag==true){
        document.write("有"+a)
        }else{
            document.write("输入错误");
        }

测试：

 document.write("1和2比较特殊不用管");
       for(var a=3;a<=100;a++){
        var n=a;
        var flag=true;
        for(var j=2;j<=n-1;j++){
            if(n%j==0){
                flag=false;
                break;
            }
        }
        if(flag==true){
            document.write(n+"<br>");
        }
       }

数组：

//定义数组：

// 方式1：

var b=new Array();//创建一个长度为0的空数组

// 方式2：

var b=new Array(4);//创建一个长度为4的数组

// 方式3：

// var b=new Array(2,9,0);//创建具有初始数据的数组

// 方式4；

var b=[];//创建一个空数组

// 方式5；

var b=[6];//创建了一个数据为6，长度为1的数

var sz4=new Array(6);
        document.write("sz4长度是"+sz4.length+"<br>");
        document.write("sz4这个数组的内容是:"+sz4+"<br>");
        document.write("================<br>");

 var sz6=new Array();
        document.write("sz6长度是"+sz6.length+"<br>");
        document.write("sz6这个数组的内容是:"+sz6+"<br>");
        document.write("================<br>");

var sz5=[];
        document.write("sz5长度是"+sz5.length+"<br>");
        document.write("sz5这个数组的内容是:"+sz5+"<br>");
        document.write("================<br>");

var sz3=new Array(8,9,80);
        document.write("sz3这个数组的长度是:"+sz3.length+"<br>");
        document.write("sz3这个数组的内容是:"+sz3+"<br>");

 var sz = [90,100,];//只能输入数据类型
        document.write("sz这个数组的长度是:"+sz.length+"<br>");
        document.write("sz这个数组的内容是:"+sz+"<br>");

 var sz2 = new Array(new Date);
        document.write("sz2这个数组的长度是:"+sz2.length+"<br>");
        document.write("sz2这个数组的内容是:"+sz2+"<br>");

 var arr=new Array(4);
        document.write("arr数组长度"+arr.length);
        document.write("arr内容是"+arr);

         var arr2=new Array(3,3,4,5);
         document.write("arr2长度"+arr2.length);
         document.write("arr2内容"+arr2);

         var arr3=[0];

         var arr=new Array (7);
         
         var arr4=new Array();
         var arr6=[9,9,8,7];

数组+循环：

var sz=new Array(8);
        for(var a=0;a<sz.length;a++){
            var n=Number(prompt("输入"));
            sz[a]=m;
        }
        for(var i=0;i<sz.length;i++){
            document.write(sz[i]+"<br>")//如果进行两次循环，那么输出需要sz【第二次循环变量】
        }

数组最大最小值：

  // 最大、最小值
         var l=new Array(5);
         var flag=true;
         var max=0;
         var min=100;
         for(var i=0; i<l.length;i++){
            var m=Number(prompt("输入值"));
            if(m>100||m<0){
                flag=false;
                break;
            }
            l[i]=m;
            if(m>max){
                max=m;
            }
            if(m<min){
                min=m;
            }
         }if(flag){
         document.write("最大"+max+"最小"+min);
         document.write(m)
         }

插入：

  var ary=[12,6,9,32,15];
        // 在2中插入666
        // for(var a=ary.length;a>2;a--){
        //     ary[a]=ary[a-1];
        // }
        // ary[a]=666;
        // document.write(ary);


        

        var n=Number(prompt("插入的数"));
        var p=Number(prompt("输入插入的位置"));
        
          // ary[5]=ary[4];
        // ary[4]=ary[3];
        // ary[3]=ary[2];
        // ary[2]=666;,9,32,15

        //通过循环，实现数据向后移位的效果
        for(var i=ary.length;i>pos;i--){
            //从最后一位开始，每个位置上的元素向后移动
            ary[i]=ary[i-1];
        }
        //直接在插入位置上，写入数据
        ary[pos]=num;
        //似乎应该是:12,6,666,9,32,15
        document.write(ary);


        for(var a=ary.length;a>p;a--){
            ary[i]=ary[i-1]
        }
        ary[p]=n;
        document.write(ary)

删除：

 // 数组删除
        var ary=[12,6,9,32,15];
        //删除下标2位置上的数据
        //从删除位置开始，后面的元素向前覆盖
        //ary[2]=ary[3];
        //ary[3]=ary[4];
        //删除一位
        //ary.length--;

        //通过循环实现，删除过程
        for(var i=2;i<ary.length-1;i++){
            //后面的向前移动
            ary[i]=ary[i+1];
        }

        //长度减去1
        ary.length--;

        document.write(ary);





        var ary=[10,3,2,56,90];
        for(var i=2;i<ary.length;i++){
            ary[i]=ary[i+1];
        }
        ary.length--;
        document.write(ary);

遍历：

 //定义长度为5的数组，并赋予初始值
        //数组元素的值可以是各种类型(数据类型)
        var ary=[10,"bb",true,0,"aa"];

        // 遍历数组
        // 方式1：for+数组元素下标
        // document。write（ary[0]+" "+ary[1]+"  "+ary[2]...);
        //此时i对应的是数组的元素下标
        for(var i=0; i<ary.length;i++){
            document.write("ary["+i+"]:"+ary[i]+"<br>");
        }

        document.write("=======<br>");
        // 方式2:for in 语法 (xb与上方i一样的作用);
        for(var xb in ary){
            document.write("下标："+xb+" ...>"+ary[xb]+"<br>");
        }

        for(var i in ary ){
            document.write(i+ary[i]+"<br>")
        }
        for(var a in ary){
            document.write(a+ary[a]+"<br>")
        }