2. 程式人生 > 其它 >前端開發中js方法的解析

前端開發中js方法的解析

阿新 • • 發佈：2022-04-05

Js(三)

1.Math方法

 

 

 

Math.random()後面可以接加減乘除法

2.日期物件

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
        var data = new Date();
        var year = data.getFullYear();
        
 
var mon = data.getMonth()+1;   //月份是從0開始的，0-11，所以需要加上1
        var date = data.getDate();
        var hour = data.getHours();
        var min = data.getMinutes();
        var sec = data.getSeconds();
​
        if (sec<10){sec = "0"+sec}   //當時間為一位數時變為01、02、03...
        var day = data.getDay();
        document.body.innerText 
 
= year+ '年' + mon + '月' + date + '日' + hour + '時'+min+'分'+sec+'秒'+'星期'+day
        //拼接
        //這裡的時間是死的，重新整理一下才變一下，如果要實時的話需要用到定時器
</script>
</body>
</html>

 

效果:
2022年4月2日22時9分02秒星期6

3.函式

函式的定義

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //
 
定義函式
    function func() {
       alert("hello world")
    }
    func()      //執行函式
​
    func()      //呼叫在上面也能執行函式
    function func() {
       alert("hello world")
    }
</script>
</body>
</html>

 

也可以用如下方式執行函式，就不用func()呼叫去執行了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 40px;
            background: yellow;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <script>
        var aDiv = document.getElementsByTagName("div");
        function func() {
            alert("hello world")
        }
        aDiv[0].onclick = func;   //索引
        aDiv[1].onclick = func;
    </script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var fn1=function () {   //也可以這麼定義，這麼定義的話呼叫就必須在後面，不能在前面
       alert("hello world")
   }
   fn1()
</script>
</body>
</html>

 

匿名函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
   // () + - ! ~   
    +function (){
       alert("hello world");
    }()       //自己呼叫
    !function (){
       alert("hello world");
    }()
    -function (){
       alert("hello world");
    }()
    ~function (){
       alert("hello world");
    }()   
    (function (){
       alert("hello world");
    }())     //  ()的方式比較多
</script>
</body>
</html> 

傳參

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //一
        function f(x){
            alert(x);
            alert(typeof x);
        }
        f('hello')   //傳參
        //這麼傳參也可以:
        var a = 'hello'
        f(a)
        //二
        sum(1,2)   //這裡傳幾個都可以，但是後面要幾個，它就會取前幾個
        function sum(x,y,z){
            alert(z)     //如果前面為function sum(x,y)，這裡要彈出z，它不會報錯，會彈出undefined
            alert(x + y + z)  //前面sum(1,2)沒有給z，這裡要拼接的話會顯示NaN(非數字)
            z = z || 18   //前面如果沒有給z，可以通過這種方式給它值
            alert(x + y + z)
        }
    </script>
</body>
</html> 

返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="改變樣式">
<div id="box"  >這是一個div</div>
    <script>
        //返回值
        function f(a,b) {
            var num = a+b;
            alert(num)
            return num
        }
        var qiye = f(1,6); //呼叫並傳參
        alert(qiye)
​
        
        //改變樣式的小案例
        var oDiv = document.getElementById('box');
        var oBtn = document.getElementById("btn");
        function fnchange(sColor, sSize) {
            oDiv.style.color = sColor;
            oDiv.style.fontSize = sSize;
        }
        oBtn.onclick= function () {
            fnchange("red", '30px')
        }
    </script>
</body>
</html>

不定長引數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    // 全域性作用域和區域性作用域
    //在script裡面的--全域性作用域
    //在函式裡面的--區域性作用域
​
    //全域性變數     區域性變數
    // js塊級作用域的一個概念---es6之前的版本
    
    //不定長引數es5的用法，es5用的比較多
    function sum() {      //這裡不需要傳值
        console.log(arguments.length)
        console.log(arguments[3])
    }
    sum(1,2,3,4,5,6,7,8)   //這裡傳值
    
    //不定長引數es6的用法
    function sum1(...args) {   
        console.log(args)
    }
    sum1(1,2,3,4,5,6,7,8)
  </script>
</body>
</html>     

作用域

這裡介紹的是es6之前的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    //全域性作用域和區域性作用域
    //在script裡面的--全域性作用域
    //在函式裡面的--區域性作用域
​
    //定義在標籤中的:全域性變數  定義在函式中的:區域性變數
    // js塊級作用域的一個概念---es6之前的版本
    //就是說你在裡面定義的變數在外面呼叫的話會報錯
​
    var num = 10;
    function f1(){
        var num;
        function f2() {
            console.log(num)  //輸出結果為undefined，因為沒給值
        }
        f2()
    }
    f1()
    //因為它會往上找一個最近的，即var num，就近原則，只找一個
    //如果沒有再繼續找它的父級
  </script>
</body>
</html>

預解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      //第一種
      console.log(num);  // num is not defined
​
      //第二種
      console.log(num);//undefined
      var num= 4;    //為什麼?在後面解釋
      //就相當於
      // var num;
      // console.log(num);
      // num = 4
​
​
      //第三種
      f() // 11   為什麼f()在前在後都可以?
      function f() {
          console.log(11)
      }
      // f() //11
​
      //無論f()在前在後都相當於
      function f() {
          console.log(11)
      }
      f()
​
​
      //第四種
      f() //f is not defined  為什麼?
      var f = function () {
          console.log(100)
      }
      f() //100
​
      //f()在前就相當於
      var f;
      f()
      f = function () {   //賦值在後
          console.log(100)
      }
​
      //f()在後就相當於
      var f;     //按順序往下排
      f = function () {   //賦值在後
          console.log(100)
      }
      f()
​
      //js程式碼執行的時候是分成了兩步來進行的,  預解析 和 執行
      //什麼是預解析
      //   js引擎 會把js 裡面所有的var和function 宣告的東西 放到※※當前作用域※※的最前面
      //什麼是執行
      //   然後執行, 按照程式碼的順序從上向下執行
      //
      //變數預解析--把所有宣告的變數提到當前作用域的最前面，不賦值，其餘的按順序在最後面往下排
  </script>
</body>
</html> 

預解析案例解析

案例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
        var num = 100;
        func();
        function func() {
            console.log(num)  //undefined
            var num = 20;
        }
​
        // 相當於
        var num;
        function func() {
            var num;
            console.log(num)
            num = 20;
        }
        num = 100;
        func()
</script>
</body>
</html> 

案例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
        var num = 100;
        function func() {
            console.log(num) //undefined
            var num = 20;
            console.log(num) //20
        }
        func();
​
        //相當於
        // var num;
        // function func() {
        //     var num;
        //     console.log(num)
        //     num = 20;
        //     console.log(num)
        // }
        // num = 100
        // func()
</script>
</body>
</html> 

案例三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
        var a = 10;
        f1();
        function f1() {
            var b = 8;
            console.log(a); //undefined
            console.log(b); //8
            var a = "hello world"
        }
        // 相當於
        var a;
        function f1() {
            var b;
            var a;
            b = 8;
            console.log(a); 
            console.log(b);
            a = "hello world"
        }
        a = 10
        f1()
</script>
</body>
</html> 

案例四※※※

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
        f1();
        console.log(c); //9
        console.log(b); //9
        console.log(a); //9
        function f1(){
            var a = b= c = 9; // var a = b= c = 9; ====>  var a = 9; b= 9; c =9;
            console.log(a); //9
            console.log(b); //9
            console.log(c); // a is not defined
        }
        //※※※※※※※
        //用var宣告的是區域性變數，直接賦值的是全域性變數
        //※※※※※※※
        
        // 相當於
        function f1(){
            var a;
            a = 9;
            b = 9;
            c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        f1()
        console.log(c);
        console.log(b);
        console.log(a);
</script>
</body>
</html>

4.定時器

一次性和迴圈定時器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        setTimeout(function (){    //一次性定時器，到什麼時間執行一次什麼事
            console.log(1)
        },5000)    //過五秒控制器內列印1
        
        setInterval(function (){   //迴圈執行定時器
            console.log(qqq)
        },1000)    //隔一秒列印一下qqq
    </script>
</body>
</html> 

清除定時器

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box">
        還有 <span id="wrap">10s</span>我們就下課了!!
    </div>
    <script>
        var wrap = document.getElementById('wrap')
        var num = 10;
        var times
        times = setInterval(function () {
            num --;
            wrap.innerHTML = num + "s";    //拼接
            if (num===0){        //否則會減到-1,-2,-3,-4,-5...
                clearInterval(times)      //清除定時器
                window.location.href = 'https://www.baidu.com' //到時間後跳轉到網址
            }
        },1000)
    </script>
</body>
</html>

 

 

相關推薦

前端開發中js方法的解析

Js(三) 1.Math方法       Math.random()後面可以接加減乘除法 2.日期物件   <!DOCTYPE html>

前端開發中Js常見錯誤

1.錯誤分為兩種： （1）程式碼錯誤：這種錯誤瀏覽器會報錯，可以根據錯誤型別去排錯

前端開發中常用的陣列方法（一）

前端開發中常用的陣列方法（一） JavaScript提供了大量不同處理陣列的方法，這裡花幾分鐘介紹常用的幾個陣列方法。

前端開發之JS中filter()的使用

前端開發之JS中filter()的使用 2021-12-20 11:28 前言 在前端開發過程中，對陣列的資料進行處理也是比較常見的操作之一，而且對陣列進行操作的頻率遠遠大於對物件進行操作，因此在開發過程中對於數組裡面的資料進

web 前端開發中必會 JavaScript 屬性和常用方法經典版

Web前端入門到精通必會JS的屬性和常用方法，應同學留言要求，今天抽時間整理總結了Web前端實際開發中必會的變數、基本資料型別、表示式與操作符、流程控制語句、陣列，核心知識點與常用方法，用不到可以直接不用學了

許久不做前端, 偶爾看一下前端開發中的單元測試框架.

今天突然覺得反正有時間, 看電影煩了,那就稍微看一下前端開發中的一些單元測試框架,記得vue的腳手架裡面有mocha和jasmine兩個, 剛好查了下, 隨手就找了jasmine的官方資料看一下, 前端開發一般用到的民有mock.js,這個

百度地圖在前端開發中的運用

一、安裝及引入 1、在vue中安裝依賴 $ npm install vue-baidu-map --save 在vue腳手架main.js中引入

前端開發中的除錯技巧

前端開發中的除錯技巧 骨灰級除錯大師Alert 那還是網際網路剛剛起步的時代，網頁前端還主要以內容展示為主，瀏覽器指令碼還只能為頁面提供非常簡單的輔助功能的時候。那個時候，網頁主要執行在以IE6為主的瀏覽器

thymeleaf中js無法解析陣列的問題

技術標籤：javascriptjs var shopInfoList = \'[[${shopInfoList}]]\'; console.log(shopInfoList); 可以看到打印出來的是一個字串，而不是陣列。 嘗試各種轉換方式都不成功。最後在script標籤中新增th:inline

EasyCVR前端開發中裝置管理分頁呼叫報錯unknown mutation type: SET_Page處理

分頁功能是網站或者頁面前端開發中一個重要的模組，在我們開發EasyCVR的分頁功能時，發現分頁的狀態沒有儲存的情況下，當分頁改變時把改變的資料儲存到Vuex中，當頁面載入完從Vuex中取值後呼叫則會出現報錯。

前端開發中UI問題處理

前端開發中UI問題處理 A:儘量減少fixed的用法和vh和vw的css計算，在魅族手機上不支援vh和vw的計算，fixed的css在部分安卓手機上有不相容的問題，可以使用transform:translateZ(0)來避免會抖動的問題；

前端開發中面向物件的五項原則

面向物件有人分為五大原則，分別為單一職責原則、開放封閉原則、依賴倒置原則、介面隔離原則、里氏替換原則。還有迪米特法則（又稱最小知識法則）

什麼是前端開發中的 mobile first 策略

在 2010 年的世界移動大會上，谷歌 CEO 埃裡克施密特提出，設計師在產品設計中應該遵循“移動優先”的原則。 “移動優先設計”是什麼意思？ 它為什麼如此重要？ 如何製作？ 我將在下面的部分回答這 3 個問題。

js指令碼中執行java後臺程式碼方法解析

使用場景：關閉頁面彈窗時執行sql語句。 其實js裡執行sql語句有多種方式。 方式一：直接在js程式碼裡呼叫sql語句，原則上不能使用，因為這將sql直接暴露在客戶端，安全性極差。

.NET混合開發解決方案11 WebView2載入的網頁中JS呼叫C#方法

系列目錄     【已更新最新開發文章，點選檢視詳細】 WebView2控制元件應用詳解系列部落格

Python中的四種交換數值的方法解析

這篇文章主要介紹了Python中的四種交換數值的方法解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

python中刪除某個元素的方法解析

這篇文章主要介紹了python中刪除某個元素的方法解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

使用js實現單鏈解決前端佇列問題的方法

使用場景 比如前端需要處理什麼佇列一類的業務 比如有人下單，需要彈出什麼彈窗

node.JS路徑解析之PATH模組使用方法詳解

路徑組成 path.dirname(p) 返回路徑p所在的目錄 var path = require(\'path\'); console.log(path.dirname(\'/foo/bar/baz/asdf/a.txt\')); // /foo/bar/baz/asdf

Vue開發中遇到的跨域問題及解決方法

跨域是指a頁面想獲取b頁面資源，如果a、b頁面的協議、域名、埠、子域名不同，或是a頁面為ip地址，b頁面為域名地址，所進行的訪問行動都是跨域的，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資