day 32 css后续补充以及js 简单入门

前情提要:

　　　　利用html 和css ,js 模拟小米的官网(待做)

　　　　一:第一个sj利子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // <!--编写js代码-->
        document.write('<h1>hello world</h1>')
    //    把网页发送到网页上
        alert('hello python')
    //    弹出提示框
    </script>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<script>
    document.write('<h1>hello java</h1>')
</script>
</body>
</html>
<script>
    document.write('<h1>hello golang</h1>')
</script>

View Code

　　　　二:引入外部js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script type="text/javascript" src="d.js">-->
    <!--或者-->

    <script  src="d.js" async>
    </script>
</head>
<body>
<input type="button" value="click me" onclick="alert(11)">
</body>
</html>

View Code

alert("hello wold")

View Code

　　　　三:定义变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var aa = '早乙女';
        var bb = 10.5;
        var cc = true;
        dd = 10;
        alert(aa);
        alert(bb);
        alert(cc);
        alert(dd);
    </script>
</head>
<body>

</body>
</html>

View Code

　　　　四:运算符号

　　　　五:条件判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var aa=[40];
        if (aa>60){
            document.write("<p>优秀</p>")
        }
        else if(aa>50){
            document.write("<p>及格</p>")
        }
        else {
            document.write("<p>不及格</p>")
        }
    </script>
</head>
<body>

</body>
</html>

View Code

　　　　六:条件判断2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // <!--根据需求生成星期几-->
        var aa=2;
        switch (aa){
            case 1:{
                document.write('这是星期1')
            }
            break;
            case 2:{
                document.write('这是星期2')
            }
            break;
            case 3:{
                document.write('这是星期3')
            }
            break;
            default:{
                document.write('没这个新奇')
            }break;

        }

    </script>
</head>
<body>

</body>
</html>

View Code

　　　　七:循环

一:

二:

三:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>
    // <!--while 循环条件写在前面-->
    // <!--输出1~10的和-->
    // var num =0;
    // var sun =0;
    // while (num<10){
    //     sun =sun+num;
    //     num++;
    // }
    // alert(sun)
//    do while 循环
//    计算1~10 内的奇数和
//     var num =0;
//     var sun =0;
//     do{
//         if (num%2==1){
//             sun=sun+num;
//         }
//         num=num+1;
//     }while (num<10)
// alert(sun)
//    计算1~10 的偶数相加
    var sun =0;
    for (var num =1;num<=10;num++){
        if (num%2==0){
            sun=sun+num;
        }
    }
    alert(sun)
</script>
</head>
<body>

</body>
</html>

View Code

八:循环案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>
    // <!--生成一个三角形-->
    for (var i=1;i<=6;i++){
    //    生成空格数量
        var spnum =6-i;
        for(var col=1;col<=spnum;col++){
            document.write('&nbsp;');
        }
        var srnum =2*i-1;
        for (var nol=1;nol<=srnum;nol++){
            document.write("*")
        }
        document.write("<br/>")

    }
</script>
</head>
<body>

</body>
</html>

View Code