JavaScript實用案例與常見問題(一)

JavaScript(入門):
https://blog.csdn.net/Veer_c/article/details/103894517
JavaScript實用案例與常見問題(一):
https://blog.csdn.net/Veer_c/article/details/103894959
JavaScript實用案例及常見問題(二):
https://blog.csdn.net/Veer_c/article/details/103895166

案例:利用CSS和html做出一個QQ登陸的頁面。

<style type="text/css">
#div1{
    width:300px;
    height:300px;
    border:1px solid #F00;
    margin-left:500px;
    margin-top:200px;
    background-image:url(05.%E7%B4%A0%E6%9D%90/1.jpg);
    background-repeat:no-repeat;
    background-position:top center}
#userDiv{
    margin-left:50px;
    margin-top:100px;
    }
#passwordDiv{
    margin-left:50px;
    margin-top:10px;
    }
#btnDiv{
    margin-left:100px;
    margin-top:10px;
    }
#inputUser{
    background-image:url(05.%E7%B4%A0%E6%9D%90/head.png);
    background-repeat:no-repeat;
    background-position:center left;
    padding-left:30px;}
#inputpassword{
    background-image:url(05.%E7%B4%A0%E6%9D%90/key.jpg);
    background-repeat:no-repeat;
    background-position:center left;
    padding-left:30px;}
</style>
</head>
<body>
<div id="div1">
    <form>
        <div id="userDiv">用戶名:<input type="text" id="inputUser" /></div>
        <div id="passwordDiv">&nbsp;&nbsp;:<input type="password" id="inputpassword" /></div>
        <div id="btnDiv"><input type="button" value="登陸"/><input type="button" v````
lue="註冊"/></div>
    </form>
</div>
</body>

流程控制語句

<script type="text/javascript">
/*
    if語句
        if(表達式){
            語句  
        }else{
            語句
        }
        條件可以是:
            布爾值:true:成立 ; false:不成立
            number:非0:成立; 0: 不成立
            string: 非空字符串: 成立 ; 空字符串: 不成立
            object: 非null: 成立;  null:不成立
    swtich語句
        swtich(變量){
        case 選項1:
            語句;
            break;  如果不break,就會繼續下面選項的語句    
        case 選項2::
            語句;
            break;
        default:
            默認;
        }
    注意:在js中的switvch語句中的case選項的值:
    1.可以選擇常量,String類型或者number類型
    2.case選項中的值還可以是變量
    3.在java中case選項中的值只能是常量不能是變量
    4.case選項還可以是表達式
    for語句:
    for(初始化語句;條件判斷語句;流程控制語句){
        循環體語句
    }
    需求:頁面上打印十次helloworld
    需求:對1-100進行求和
    while語句
    初始化語句
    while(條件判斷語句){ 
    循環體語句;
    條件控制語句;
    }
    執行流程:
    需求:在頁面上打印十次helloworld;
    do-while語句
    初始化語句;
    do{
        循環體語句;
        條件控制語句;
    }while(判斷條件語句)
    需求:在頁面上打印十次helloworld;
*/
/*
    if(null){
        alert("條件成立");
        }else{
            alert("條件不成立");
            }*/
    /*      
    var choice = "b";   
    var b = "b";
    switch(choice){
        case "a":
        alert("您選擇了a");
        break;
        case b:
        alert("您選擇了b");
        break;
        case "c":
        alert("您選擇了c");
        break;
        default:
        alert("您的選項不存在");
        break;
        }*/
    /*
    var age = 19;
    switch(true){
        case age>=18:
        alert("你是成年人");
        break;
        case age<18:
        alert("未成年人禁止入內");
        break;
        }*/
    //需求:頁面上打印十次helloworld
    /*
    for(var i=0;i<10;i++){
        document.write("helloword");
        document.write("<br>");
        }   
    //需求:對1-100進行求和
    var sum = 0;
    for(var i = 1;i<=100;i++){
        sum+=i;
        }   
    document.write(sum);*/
    /*  
    var i = 0;
    while(i<10){
        document.write("helloword");
        document.write("<br>");
        i++;
        }*/
    var i = 0;
    do{
        document.write("helloword");
        document.write("<br>");
        i++;
        }while(i<10);
</script>
</head>
<body>
</body>

with語句:方便函數的調用
with(對象){
直接寫對象的方法}

  with(document){
    var i = 0;
    do{
        write("helloword");
        write("<br>");
        i++;
        }while(i<10);
       }

js中的函數中的定義

<script type="text/javascript">
/*
    js中的函數定義:
    function 函數名(形式參數列表){函數體}
    函數定義中需要注意的問題:
    1.在js中函數的定義的參數列表不需要寫var
    2.js中的函數可以有返回值,無需聲明返回值類型,只需要通過return這個關鍵字返回結果即可
    3.js中沒有方法重載的概念,如果方法名相同,後面的方法就會覆蓋前面的方法
    4.在我們js中的每一個函數中都存在一個arguments數組,這個數組就是用來接受我們的所有的實際參數的,接收完畢之後
    給我們的函數的形式參數從左到右依次賦值
    js函數的調用:
    1.如何調用:函數名稱(實際參數)
    2.實際參數個數<形式參數個數   NaN  
    3.實際參數個數>形式參數個數   會拿着你的所有的實際參數給你的形式參數從左到右依次賦值,後面多餘的形式參數直接捨棄    */
    //定義一個函數,a和b的加法
    function add(a,b){
        alert(arguments.length);
        var res = a+b;
        return res;
        }
    //定義一個3個數相加的add方法
    /*
    function add(a,b,c){
        var res= a+b+c;//1+2+c;
        return res;
        }*/
    var sum = add(2,2,3);
    document.write(sum);
</script>

查詢每個月份對應的天數
添加一個函數

<script type="text/javascript">
    //當我的按鈕的單擊事件被觸發以後需要執行的操作
    function checkMonth(){
        //獲取單行輸入域內的用戶輸入的月份值
        var month = document.getElementById("month").value;
        //使用if語句做判斷,給出相應的提示
        /*
        1,3,5,7,8,10,12  大月 31天
        4,,6,9,11  小月  30天
        2  小小月  28天    */
   if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){     
            alert("該月有31天");
            }else if(month==4||month==6||month==9||month==11){
                alert("該月有30天");
                }else if(month==2){
                    alert("該月有28天");
                    }else{
                        alert("星球上沒有這個月份");
                        }
        }
</script>
</head>
<body>
請輸入你需要查詢的月份:<input type="text" id="month"/>
<!--在這裏需要給我的button標籤添加一個單擊事件-->
<input type="button" value="查詢天數" onclick="checkMonth()" />
</body>

JavaScript(入門):
https://blog.csdn.net/Veer_c/article/details/103894517
JavaScript實用案例與常見問題(一):
https://blog.csdn.net/Veer_c/article/details/103894959
JavaScript實用案例及常見問題(二):
https://blog.csdn.net/Veer_c/article/details/103895166

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章