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

String中的方法的使用

<script type="text/javascript">
/*
1.String對象定義
方式1:var s1 = new String("hello");
方式2:var s2 = "hello";
charAt(索引): 返回指定索引的內容
indexOf(字符串): 返回首次出現指定字符的索引位置
lastIndexOf(字符串): 返回最後出現指定字符的索引位置
fontcolor("red"): 直接給字符串添加顏色
split("字符串"): 使用指定字符串切割字符串，返回字符串數組
substring(start,end); 截取字符串，start：開始索引， end:結束索引
substr(strat,[length]) 截取字符串， start：開始索引 length: 截取的字符串長度
*/
    var s1 = new String("hello");
    var s2 = new String("hello");
    document.write(s1==s2);
    document.write("<br>");
    //valueOf(),這個方法是取出對象中的內容
    document.write(s1.valueOf()==s2.valueOf());
    document.write("<br>");
    //創建字符串的方式2:直接賦值
    var s3 = "hello";
    var s4 = "hello";
    document.write(s3==s4);
    document.write("<br>");
    document.write("<hr>");
    //charAt(索引): 返回指定索引的內容
    document.write(s1.charAt(1));
    document.write("<br>");
    //indexOf(字符串): 返回首次出現指定字符的索引位置
    document.write(s1.indexOf("e"));
    document.write("<br>");
    //lastIndexOf(字符串): 返回最後出現指定字符的索引位置
    document.write(s1.lastIndexOf("l"));
    document.write("<br>");
    //fontcolor("red"): 直接給字符串添加顏色
    s3 = s3.fontcolor("red");
    document.write(s3);
    document.write("<br>");
    var s5 = "java-php-web";
    //split("字符串"): 使用指定字符串切割字符串，返回字符串數組
    var arr = s5.split("-");
    for(var i =0;i<arr.length;i++){
        document.write(arr[i]);
        document.write("<br>");
        }
    document.write("<br>");
    //substring(start,end); 截取字符串，start：開始索引， end:結束索引
    document.write(s4.substring(0,2));
    document.write("<br>");
    //substr(strat,[length]) 截取字符串， start：開始索引 length: 截取的字符串長度
    document.write(s4.substr(0,2));
</script>

boolean對象和Number對象的區別：

<script type="text/javascript">
    //Boolean對象
    var b1 = new Boolean(true);
    var b2 = new Boolean(true);
    document.write(b1==b2);
    document.write("<br>");
    document.write(b1.valueOf()==b2.valueOf());
    document.write("<br>");
    //Number對象
    var n1 = new Number(10);
    //document.write(n1);
    var n2 = new Number(10);
    document.write(n1==n2);
    document.write("<br>");
    document.write(n1.valueOf()==n2.valueOf());
</script>

Math中的一些方法的使用：

<script type="text/javascript">
/*
            Math對象
            常用的方法：
            1）ceil()： 向上取整。 如果有小數部分的話，直接+1
            2）floor(): 向下取整。如果有小數部分的話，直接丟失小數部分，保利整數位
            3) round(): 四捨五入取整。滿5進一
            4）random(): 生成一個隨機的0-1的小數 .包含0，不包含1
            5）max(): 返回最大值
            6）min(): 返回最小值 
            var num = 3.50;
            document.write(Math.ceil(num)+"<br/>");
            document.write(Math.floor(num)+"<br/>");
            document.write(Math.round(num)+"<br/>");
            document.write(Math.round(Math.random()*100)+"<br/>");
            document.write(Math.max(10,6,54,23,76)+"<br/>");
            document.write(Math.min(10,6,54,23,76)+"<br/>");
*/
    var i = 3.14;
    //1）ceil()： 向上取整。 如果有小數部分的話，直接+1
    document.write(Math.ceil(i));
    document.write("<br>");
    //2）floor(): 向下取整。如果有小數部分的話，直接丟失小數部分，保利整數位
    document.write(Math.floor(i));
    document.write("<br>");
    //3) round(): 四捨五入取整。滿5進一
    document.write(Math.round(i));
    document.write("<br>");
    //4）random(): 生成一個隨機的0-1的小數 .包含0，不包含1
    document.write(Math.random());
    document.write("<br>");
    //5）max(): 返回最大值
    document.write(Math.max(2,3,5,7));
    document.write("<br>");
    //6）min(): 返回最小值 
    document.write(Math.min(2,3,5,7));
</script>

猜數字遊戲的案例，網頁版

<script type="text/javascript">
    //生成隨機數
    var num = Math.floor(Math.random()*100+1);
    alert(num);
    function checkNumber(){
        //1.獲取輸入狂內部輸入的數字
        var inputNumber = document.getElementById("inputNumber").value;
        //將數字的類型進行轉換
        inputNumber = parseInt(inputNumber);
        //做if判斷並給出提示
        if(inputNumber>num){
            alert("大了");
            }else if(inputNumber<num){
                alert("小了");
                }else if(inputNumber==num){
                    alert("對了");
                    }
        }
</script>
</head>
<body>
請輸入你猜測得數字:<input type="text" id="inputNumber" />
<input type="button" onclick="checkNumber()" value="猜數字" />
</body>

Data對象及方法的使用

<script type="text/javascript">
    //創建一個date對象
    var date = new Date();
    document.write(date);
    document.write("<br>");
    //在java中我們使用日期的格式化對象SimapleDateFormat() 給一個模式:yyyy-MM-dd 
    //document.write(date.getYear());
    document.write("<br>");
    //獲取年份
    document.write(date.getFullYear()+"年");
    //獲取月份
    document.write(1+date.getMonth()+"月");
    //獲取日期
    document.write(date.getDate()+"日&nbsp;&nbsp;");
    //獲取時
    document.write(date.getHours()+"時");
    //獲取分
    document.write(date.getMinutes()+"分");
    //獲取秒
    document.write(date.getSeconds()+"秒");
</script>

案例：做一個網頁時鐘：

<script type="text/javascript">
    //創建一個獲取當前時間的方法
    function getTime(){
        //獲取span標籤對象
        var spanTime = document.getElementById("sapnTime");
        //創建日期對象
        var date = new Date();
        //獲取年月日,時分秒進行字符串拼接
        var time = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"&nbsp;&nbsp;"+date.getHours()+"-"+date.getMinutes()+"-"+date.getSeconds();
        //給標籤體設置內容,innerHTML這個屬性
        spanTime.innerHTML=time;
        }
    //調用設置時間的方法
    //getTime();//這樣的方式對上面設置時間的方法只調用了一次,所以我們的時間無法實現動態的設置變化
    //如果需要讓時間動起來的話,我們需要每隔一秒調用getTime()這個方法一次
    window.setInterval("getTime()",1000);
    //參數1:調用的函數名稱   參數2:每隔多久調用一次,調用的次數沒有限制
</script>

js中的數組問題：

<script type="text/javascript">
    /*
    js中數組的創建方式:
    方式1:用new的方式創建數組
        1.1:var arr = new Array(3); 創建數組指定長度
        1.2 var arr = new Array(); 創建數組不指定長度
        1.3 var arr = new Array("hello",100,200); 創建數組並給數組的元素賦值
    方式2:直接賦值
        var arr = [100,"hello",200];
    數組創建需要注意:
    1.在js中數組的長度是可變的,他可以根據添加進來的多出來的元素進行自動的擴容
    如果早java中是不可以的,會出現數組索引越界異常
    2.js中的數組中可以添加多了不同類型的元素
    常用的方法：
    join(字符串): 使用指定的字符串，把數組的所有元素連接在一起，最終組成一個新的字符串
    reverse(): 反轉數組中的元素
    */
    //1.1:var arr = new Array(3);
    var arr = new Array(3);
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = 300;
    arr[3] = 400;
    //1.2 var arr = new Array(); 創建數組不指定長度
    var arr2 = new Array();
    arr2[0] = 100;
    arr2[1] = true;
    arr2[2] = "hello";
    //1.3 var arr = new Array("hello",100,200);
    var arr3 = new Array(100,200,300);
    //方式2:創建數組,並給數組直接賦值不需要new
    var arr4 = [100,200,"world"];
    //便利數組
    for(var i=0;i<arr4.length;i++){
        document.write(arr4[i]);
        document.write("<br>");
        }
    document.write("<hr>");
    //join(字符串): 使用指定的字符串，把數組的所有元素連接在一起，最終組成一個新的字符
    var arr5 = ["jave","php","web"];
    var str = arr5.join("-");
    document.write(str);
    document.write("<br>");
    //reverse(): 反轉數組中的元素
    arr5 = arr5.reverse();
    for(var i=0;i<arr5.length;i++){
    document.write(arr5[i]);
    document.write("<br>");
    }
</script>

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