高级网页设计Class-JavaScript

2018-10.29

了解控制台，输出，数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--输出-->
<script>
    alert("hello world");//alert窗口还有confirm和prompt
    document.write("hello www");
    document.write("<h2>hello lll</h2>");
    console.log("hello");//控制台输出日志。控制台是测试调控的作用，与用户无关
    console.dir(document);//输出对象
</script>
<!--数据类型-->
<script>
    var bar="hello world~";
    var foo=9.6;
    var bl=true;//true=1,false=0
    //输出
    console.log(typeof bar);//typeof类型 //写法二 console.log(typeof (bar));
    console.log(typeof foo);
    console.log(typeof bl);
    console.log(typeof document);
    console.log(typeof wangshuwei);
    console.log(typeof null);//object

    console.log("1"+1);//自动类型转换。数字转字符串.11
    console.log("2"-1);//字符串转数值1
    console.log("11"+2-1);//111

    console.log(1+true);//2
    console.log(1+false);//1
    console.log(1-true);//0
    console.log(1-false);//1

    console.log(1-"true");//NAN
    console.log(isNaN(9.6));//false

    console.log(isNaN(false));//false
    console.log(isNaN(NaN));//true

    console.log(typeof 8%3);
    console.log(8%3);
    console.log(8%2==false);
    console.log(8%2===false);//数值相等，数据类型相等
</script>
</body>
</html>

程序设计

question：输出和7无关的数组（100内）如7,17,27,28,70,71,72这些会被筛选出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--程序结构-->
    <style>
        div{
            div{
            width: 50px;
            height: 50px;
            float: left;
            border: 1px solid #eee;
            margin: 7px;
            font-size: 20px;
            line-height: 50px;
            text-align: center;
        }
        }
    </style>
</head>
<body>
<script>
    // var sum=0;
    // for(var i=1;i<=100;i++){
    //     sum+=i;
    // }
    // console.log(sum);//5050

    //
    for (var i=1;i<=100;i++){
        if (i<=70){
            if(i%7==0||i%10==7||i/10==7){
                document.write("<div>"+"guo"+" </div>");
            }
            else
                document.write("<div>"+i+"</div>");
        }else if(i>70&&i<=80){
            document.write("<div>"+"guo"+" </div>");
        }else if(i>80&&i<=100){
            if(i%7==0||i%10==7||i/10==7){
                document.write("<div>"+"guo"+" </div>");
            }
            else
                document.write("<div>"+i+"</div>");
        }
    }
</script>
</body>
</html>

高级网页设计Class-JavaScript

for和while循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function</title>
</head>
<body>
<script>
    console.log(sum());
    function sum() {
        var tem=0;
        for (var i=0;i<=100;i++){
            tem+=i;
        }
        return tem;
    }
   // sum(10);
    console.log(sum());
</script>

<script>
    function sum1(m,n) {
        var tem1=0;
        for (var i=m;i<=n;i++){
            tem1+=i;
        }
        return tem1;
    }
    // sum1(10,20);
    console.log(sum1(10,20));
</script>

<script>
    function sum2() {
        var tem=0;
        var num=1;
        while(num<101) {
            tem+=num;
            num++;
        }
        return tem;
    }
    console.log(sum2());
</script>

<script>
    function sum3(m,n) {
        var tem1=0;
        var num=10;
        while(num<21) {
            tem1+=num;
            num++;
        }
        return tem1;
    }
    // sum1(10,20);
    console.log(sum3());
</script>
</body>
</html>

高级网页设计Class-JavaScript

2018-11.1

event事件

box.style.width=“800px”;变宽
box.style.width=“100px”;变窄
box.style.display=“none”;消失（隐藏）
box.style.display=“block”;出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>event基础</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: #666666;
            margin-top: 10px;
        }
    </style>
    <!--应用-->
</head>
<body>
<button onclick="bk()">变宽</button>
<button onclick="bz()">变窄</button>
<button onclick="hide()">消失</button>
<button onclick="appear()">出现</button>
<div id="box"></div>
<script>
    var box =document.getElementById('box');
    console.log(box);
    function bk() {
        box.style.width="800px";
    }
    function bz() {
        box.style.width="100px";
    }
    function hide() {
        box.style.display="none";
    }
    function appear() {
        box.style.display="block";
    }
</script>
</body>
</html>

高级网页设计Class-JavaScript

随机数

box.innerHTML=“wangshuwei”;//修改文本内容
box.innerHTML=Math.random();//0-1
box.innerHTML=Math.random()*100;//0-100
var w= box.innerHTML=Math.floor(Math.random()*300)+400;//300-700的随机数
var h= box.innerHTML=Math.floor(Math.random()*900)+100;//最大899+100

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>object</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: purple;
            margin-top: 10px;
            font-size: 2em;
            text-align: center;
            line-height: 125px;
        }
    </style>
</head>
<body>
<button onclick="change()">变！</button>
<div id="box"></div>
<script>
    // window.onload=function () {
    //     var a=b=5;
    // }
    // console.log(typeof a);//undefined
    // console.log(typeof b);//undefined
    //全局变量
    function change() {
        var box=document.getElementById("box");//推荐使用双引号
        console.log(box);
        // alert("hello");
        // document.write("hello");
        // box.innerHTML="wangshuwei";
        // box.innerHTML=Math.random();//0-1
        // box.innerHTML=Math.random()*100;//0-100

        // box.innerHTML=Math.random()*300+400;
       var w= box.innerHTML=Math.floor(Math.random()*300)+400;//300-700的随机数
       //100-999
        var h= box.innerHTML=Math.floor(Math.random()*900)+100;//最大899+100
        box.innerHTML=w+"<br>"+h;
        box.style.width=w+"px";//每次随机宽度
        box.style.height=h+"px";
        box.style.backgroundColor="#"+h;
        box.style.fontSize=parseInt(w/10)+"px";
    }
</script>
</body>
</html>

高级网页设计Class-JavaScript
点击后随机输出两个数字并且背景的大小和颜色也会改变