JavaScript 音頻插件和圖表插件

原創 OliGit 2020-07-08 12:27

howler音頻插件

配置項及事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/howler.min.js"></script>
</head>
<body>
    <script>
        //實例化音頻
        var sound = new Howl({
            // 初始化配置
            // 資源路徑，及多媒介資源
            src:"./qb.mp3",
            // src : ["./qb.mp3", "./qb.wav", "./qb.ogg"],//讓瀏覽自動識別可以播放的音頻文件
            
            // 自動播放: true表示自動播放，false表示不自動播放
            autoplay:true,

            // 循環播放: true表示循環，false表示不循環
            loop:false,

            // 音量，在0-1之間，默認爲1
            volume:1,

            // 事件
            onload:function(){
                console.log("音頻就緒");
            },

            onplay:function(){
                console.log("開始播放");
            },

            onend:function(){
                console.log("結束播放");
            },

            onpause:function(){
                console.log("暫停播放");
            },

            onstop:function(){
                console.log("停止播放");
            }
        }); 
    </script>
</body>
</html>

播放、暫停、停止、狀態

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/howler.min.js"></script>
</head>
<body>
    <button id="btn1">播放</button>
    <button id="btn2">暫停</button>
    <button id="btn3">停止</button>
    <button id="btn4">播放狀態</button>
    <script>
        //實例化音頻
        var sound = new Howl({
            // 資源路徑
            src:"./qb.mp3",

            // 事件
            onload:function(){
                console.log("音頻就緒");
            },

            onplay:function(){
                console.log("開始播放");
            },

            onend:function(){
                console.log("結束播放");
            },

            onpause:function(){
                console.log("暫停播放");
            },

            onstop:function(){
                console.log("停止播放");
            }
        }); 

        // 播放音樂
        document.getElementById("btn1").onclick = function(){
            sound.play();
        };

        // 暫停音樂
        document.getElementById("btn2").onclick = function(){
            sound.pause();
        };

        // 停止音樂
        document.getElementById("btn3").onclick = function(){
            sound.stop();
        };

        // 獲取播放狀態
        document.getElementById("btn4").onclick = function(){
            var playing = sound.playing();
            // false:停止或暫停、true：播放
            console.log(playing);
        };
    </script>
</body>
</html>

獲取和設置靜音及音量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/howler.min.js"></script>
</head>
<body>
    <button id="btn1">播放</button>
    <button id="btn2">暫停</button>
    <button id="btn3">靜音</button>
    <button id="btn4">音量</button>

    <script>
        //實例化音頻
        var sound = new Howl({
            // 資源路徑
            src:"./qb.mp3",
        }); 

        // 播放音樂
        document.getElementById("btn1").onclick = function(){
            sound.play();
        };
        // 暫停音樂
        document.getElementById("btn2").onclick = function(){
            sound.pause();
        };

        // 獲取和設置音頻靜音
        document.getElementById("btn3").onclick = function(){
            // 獲取是否靜音
            var mute = sound.mute();
            // false:音量正常、true：靜音
            console.log(mute);

            // 設置靜音
            if(mute == false){
                sound.mute(true);
            }else{
                sound.mute(false);
            }
        };
        
        // 獲取和設置音頻音量
        document.getElementById("btn4").onclick = function(){
            // 獲取音量
            var vol = sound.volume();
            //音量介於0至1之間
            console.log(vol);

            // 設置音量
            sound.volume(0.2);
        };
    </script>
</body>
</html>

獲取和設置循環播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/howler.min.js"></script>
</head>
<body>
    <button id="btn1">播放</button>
    <button id="btn2">暫停</button>
    <button id="btn3">循環</button>

    <script>
        //實例化音頻
        var sound = new Howl({
            // 資源路徑
            src:"./qb.mp3",
        }); 

        // 播放音樂
        document.getElementById("btn1").onclick = function(){
            sound.play();
        };
        // 暫停音樂
        document.getElementById("btn2").onclick = function(){
            sound.pause();
        };

        // 獲取和設置循環播放
        document.getElementById("btn3").onclick = function(){
            // 獲取是否循環
            var loop = sound.loop();
            // false:不循環、true：循壞
            console.log(loop);

            // 設置循環
            if(loop == false){
                sound.loop(true);
                this.innerText = "不循環";
            }else{
                sound.loop(false);
                this.innerText = "循環";
            }
        };
    </script>
</body>
</html>

獲取和設置音頻時間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/howler.min.js"></script>
</head>
<body>
    <button id="btn1">播放</button>
    <button id="btn2">暫停</button>
    <button id="btn3">音頻總時間</button>
    <button id="btn4">當前播放時間</button>

    <script>
        //實例化音頻
        var sound = new Howl({
            // 資源路徑
            src:"./qb.mp3",
        }); 

        // 播放音樂
        document.getElementById("btn1").onclick = function(){
            sound.play();
        };
        // 暫停音樂
        document.getElementById("btn2").onclick = function(){
            sound.pause();
        };

        // 獲取音頻總時間，單位：秒
        document.getElementById("btn3").onclick = function(){
            var dur = sound.duration();
            console.log(dur);
        };

        // 獲取和設置音頻當前播放時間，單位：秒
        document.getElementById("btn4").onclick = function(){
            var seek = sound.seek();
            console.log(seek);

            // 設置當前播放時間
            sound.seek(10);
            console.log(seek);
        };
    </script>
</body>
</html>

ECharts圖表插件

配置項手冊

ECharts教程

圖表配置項

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/echarts.min.js"></script>
    <style type="text/css">
        #box{
            width: 600px; height: 500px;
            border: 1px solid #000000;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <!-- 給圖表準備一個容器 -->
    <div id="box"></div>
   
    <script>
        // 給容器初始化圖表實例
        var myChart = echarts.init(document.getElementById("box"));

        // 指定圖表配置項和數據
        var option = {
            // 定義圖表標題
            title:{
                text:"七月第一週汽車銷售數據"
            },

            // 定義x軸
            xAxis:{
                // 在x軸上與圖表數據對應的名稱
                data:["週一", "週二", "週三", "週四", "週五", "週六", "週日"]
            },

            // 定義y軸
            yAxis:{},

            //顯示圖例說明，把圖表數據對應的name值顯示出來
            legend:{},

            // 顯示數據信息，鼠標移動到某節點時，顯示詳細數據信息
            tooltip:{},

            // 系列列表，通過type決定圖表類型
            series:[{
                // 定義圖表名稱
                name:"汽車銷量",
                //定義圖表類型; bar：柱狀圖、line: 折線圖
                type:'line',
                // 圖表數據
                data:[10, 15, 12, 14, 18, 20, 25],
            }]
        };

        // 把配置項和數據顯示出來
        myChart.setOption(option);

    </script>
</body>
</html>

圖表標題配置項

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/echarts.min.js"></script>
    <style type="text/css">
        #box{
            width: 600px; height: 500px;
            border: 1px solid #000000;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <!-- 給圖表準備一個容器 -->
    <div id="box"></div>
   
    <script>
        // 給容器初始化圖表實例
        var myChart = echarts.init(document.getElementById("box"));

        // 指定圖表配置項和數據
        var option = {
            // 定義圖表標題
            title:{
                text:"七月第一週汽車銷售數據",    //主標題文字
                left:10,    //標題位置
                top:5,
                link:"https://blog.csdn.net/UserPython",    //標題跳轉地址
                target:"self",  //打開方式
                textStyle:{   //主標題樣式
                    color:"#ff0000",
                    fontSize:20,
                },
                subtext:"汽車銷售",    //副標題
                // 副標題一樣可以像主標題設計樣式，需要在屬性前加上sub區分
                subtextStyle:{   //副標題樣式
                    color:"#0000ff",
                    fontSize:14,
                }
            },

            // 定義x軸
            xAxis:{
                // 在x軸上與圖表數據對應的名稱
                data:["週一", "週二", "週三", "週四", "週五", "週六", "週日"],
            },

            // 定義y軸
            yAxis:{},

            //顯示圖例說明，把圖表數據對應的name值顯示出來
            legend:{},

            // 顯示數據信息，鼠標移動到某節點時，顯示詳細數據信息
            tooltip:{},

            // 系列列表，通過type決定圖表類型
            series:[{
                // 定義圖表名稱
                name:"汽車銷量",
                //定義圖表類型; bar：柱狀圖、line: 折線圖
                type:'line',
                // 圖表數據
                data:[10, 15, 12, 14, 18, 20, 25],
            }]
        };

        // 把配置項和數據顯示出來
        myChart.setOption(option);

    </script>
</body>
</html>

圖例配置項及調色盤

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/echarts.min.js"></script>
    <style type="text/css">
        #box{
            width: 600px; height: 500px;
            border: 1px solid #000000;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <!-- 給圖表準備一個容器 -->
    <div id="box"></div>
   
    <script>
        // 給容器初始化圖表實例
        var myChart = echarts.init(document.getElementById("box"));

        // 指定圖表配置項和數據
        var option = {
            // 定義圖表標題
            title:{
                text:"七月第一週汽車銷售數據",    //主標題文字
            },

            // 定義x軸
            xAxis:{
                // 定義x軸名稱
                name:"日期",
                // 在x軸上與圖表數據對應的名稱
                data:["週一", "週二", "週三", "週四", "週五", "週六", "週日"],
            },

            // 定義y軸
            yAxis:{
                // 定義y軸名稱
                name:"單位: 輛",
            },

            //顯示圖例說明，把圖表數據對應的name值顯示出來
            legend:{
                right:20,   //位置設置
                top:10,
                textStyle:{   //設置文本樣式
                    color:"#0000ff",
                    fontSize:14,
                },

            },
            // 定義圖例顏色，調色盤列表
            color:"#00ff00",
            //color:["#00ff00", "#ff0000", "#0000ff"],

            // 顯示數據信息，鼠標移動到某節點時，顯示詳細數據信息
            tooltip:{},

            // 系列列表，通過type決定圖表類型
            series:[{
                // 定義圖表名稱
                name:"汽車銷量",
                //定義圖表類型; bar：柱狀圖、line: 折線圖
                type:'bar',
                // 圖表數據
                data:[10, 15, 12, 14, 18, 20, 25],
            }]
        };

        // 把配置項和數據顯示出來
        myChart.setOption(option);

    </script>
</body>
</html>

座標軸樣式設置

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/echarts.min.js"></script>
    <style type="text/css">
        #box{
            width: 600px; height: 500px;
            border: 1px solid #000000;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <!-- 給圖表準備一個容器 -->
    <div id="box"></div>
   
    <script>
        // 給容器初始化圖表實例
        var myChart = echarts.init(document.getElementById("box"));

        // 指定圖表配置項和數據
        var option = {
            // 定義圖表標題
            title:{
                text:"七月第一週汽車銷售數據",    //主標題文字
            },

            // 定義x軸
            xAxis:{
                // 定義x軸名稱
                name:"日期",
                // 定義座標軸名稱樣式
                nameTextStyle:{
                    color:"#ff9900",
                    fontSize:20,
                },
                // 座標軸線的樣式
                axisLine:{
                    lineStyle:{
                        color:"#0000ff",
                        width:10,
                    },
                },
                // 在x軸上與圖表數據對應的名稱
                // data:["週一", "週二", "週三", "週四", "週五", "週六", "週日"],
                // 座標軸數據名稱逐個設置樣式
                data:[
                    {
                        value:'週一',
                        textStyle:{
                            color:"#000000",
                            fontSize:20
                        }
                    },
                    {
                        value:'週二',
                        textStyle:{
                            color:"#ff0000",
                            fontSize:14
                        }
                    },
                    {
                        value:'週三',
                        textStyle:{
                            color:"#00ff00",
                            fontSize:19
                        }
                    },
                ]
            },

            // 定義y軸
            yAxis:{
                // 定義y軸名稱
                name:"單位: 輛",
            },

            //顯示圖例說明，把圖表數據對應的name值顯示出來
            legend:{},

            // 顯示數據信息，鼠標移動到某節點時，顯示詳細數據信息
            tooltip:{},

            // 系列列表，通過type決定圖表類型
            series:[{
                // 定義圖表名稱
                name:"汽車銷量",
                //定義圖表類型; bar：柱狀圖、line: 折線圖
                type:'bar',
                // 圖表數據
                data:[10, 15, 12, 14, 18, 20, 25],
            }]
        };

        // 把配置項和數據顯示出來
        myChart.setOption(option);

    </script>
</body>
</html>

圖表標線設置

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/echarts.min.js"></script>
    <style type="text/css">
        #box{
            width: 600px; height: 500px;
            border: 1px solid #000000;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <!-- 給圖表準備一個容器 -->
    <div id="box"></div>
   
    <script>
        // 給容器初始化圖表實例
        var myChart = echarts.init(document.getElementById("box"));

        // 指定圖表配置項和數據
        var option = {
            // 定義圖表標題
            title:{
                text:"七月第一週汽車銷售數據",    //主標題文字
            },

            // 定義x軸
            xAxis:{
                // 定義x軸名稱
                name:"日期",
                // 在x軸上與圖表數據對應的名稱
                data:["週一", "週二", "週三", "週四", "週五", "週六", "週日"],
            },

            // 定義y軸
            yAxis:{
                // 定義y軸名稱
                name:"單位: 輛",
            },

            //顯示圖例說明，把圖表數據對應的name值顯示出來
            legend:{},

            // 顯示數據信息，鼠標移動到某節點時，顯示詳細數據信息
            tooltip:{},

            // 系列列表，通過type決定圖表類型
            series:[{
                // 定義圖表名稱
                name:"汽車銷量",
                //定義圖表類型; bar：柱狀圖、line: 折線圖
                type:'bar',
                // 圖表數據
                data:[10, 15, 12, 14, 18, 20, 25],
                // 圖表標線
                markLine:{
                    // min:最小值、max:最大值、average:平均值、median:中位數
                    data:[{type:"average", name:"平均數"}],
                    lineStyle:{
                        color:"#00ff00",
                        width:5
                    }
                }
            }]
        };

        // 把配置項和數據顯示出來
        myChart.setOption(option);
    </script>
</body>
</html>

折線圖和柱狀圖切換

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/echarts.min.js"></script>
    <style type="text/css">
        .abc{
            width: 600px; height: 500px;
            border: 1px solid #000000;
            margin: 50px auto;
            position: relative;
        }
        #box{
            width: 600px; height: 500px;
        }
        .bt{
            width: 150px; height: 30px; 
            line-height: 30px;
            position: absolute; top: 10px; right: 10px;
        }
    </style>
</head>
<body>
    <div class="abc">
        <!-- 給圖表準備一個容器 -->
        <div id="box"></div>
        <div class="bt">
            <button id="line">折線圖</button>
            <button id="bar">柱狀圖</button>
        </div>
    </div>
    
   
    <script>
        // 給容器初始化圖表實例
        var myChart = echarts.init(document.getElementById("box"));

        // 指定圖表配置項和數據
        var option = {
            // 定義圖表標題
            title:{
                text:"七月第一週汽車銷售",    //主標題文字
            },

            // 定義x軸
            xAxis:{
                // 定義x軸名稱
                name:"日期",
                // 在x軸上與圖表數據對應的名稱
                data:["週一", "週二", "週三", "週四", "週五", "週六", "週日"],
            },

            // 定義y軸
            yAxis:{
                // 定義y軸名稱
                name:"單位: 輛",
            },

            //顯示圖例說明，把圖表數據對應的name值顯示出來
            legend:{},

            // 顯示數據信息，鼠標移動到某節點時，顯示詳細數據信息
            tooltip:{},

            // 系列列表，通過type決定圖表類型
            series:[{
                // 定義圖表名稱
                name:"汽車銷量",
                //定義圖表類型; bar：柱狀圖、line: 折線圖
                type:'bar',
                // 圖表數據
                data:[10, 15, 12, 14, 18, 20, 25],
            }]
        };

        // 把配置項和數據顯示出來
        myChart.setOption(option);

        // 切換到柱狀圖
        document.getElementById("bar").onclick = function(){
            option.series[0].type = "bar";
            myChart.setOption(option);
        };
        // 切換到折線圖
        document.getElementById("line").onclick = function(){
            option.series[0].type = "line";
            myChart.setOption(option);
        };
    </script>
</body>
</html>

多套數據設置方法

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/echarts.min.js"></script>
    <style type="text/css">
        #box{
            width: 600px; height: 500px;
            border: 1px solid #000000;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <!-- 給圖表準備一個容器 -->
    <div id="box"></div>

    <script>
        // 給容器初始化圖表實例
        var myChart = echarts.init(document.getElementById("box"));

        // 指定圖表配置項和數據
        var option = {
            // 定義圖表標題
            title:{
                text:"苦澀汽車銷售",    //主標題文字
            },

            // 定義x軸
            xAxis:{
                // 定義x軸名稱
                name:"日期",
                // 在x軸上與圖表數據對應的名稱
                data:["週一", "週二", "週三", "週四", "週五", "週六", "週日"],
            },

            // 定義y軸
            yAxis:{
                // 定義y軸名稱
                name:"單位: 輛",
            },

            //顯示圖例說明，把圖表數據對應的name值顯示出來
            legend:{},

            // 調色盤列表
            color:["#ff0000", "#00ff00", "#0000ff"],

            // 顯示數據信息，鼠標移動到某節點時，顯示詳細數據信息
            tooltip:{},

            // 系列列表，通過type決定圖表類型
            series:[
                {
                // 定義圖表名稱
                name:"寶X",
                //定義圖表類型; bar：柱狀圖、line: 折線圖
                type:'bar',
                // 圖表數據
                data:[10, 15, 12, 14, 18, 20, 25],
                },{
                name:"奔X",
                type:'bar',
                data:[8, 12, 17, 14, 13, 23, 21],
                },{
                name:"奧X",
                type:'line',
                data:[13, 16, 12, 13, 25, 29, 15],
                }
            ]
        };

        // 把配置項和數據顯示出來
        myChart.setOption(option);
    </script>
</body>
</html>

餅狀圖配置方法

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/echarts.min.js"></script>
    <style type="text/css">
        #box{
            width: 600px; height: 500px;
            border: 1px solid #000000;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <!-- 給圖表準備一個容器 -->
    <div id="box"></div>

    <script>
        // 給容器初始化圖表實例
        var myChart = echarts.init(document.getElementById("box"));

        // 指定圖表配置項和數據
        var option = {
            // 定義圖表標題
            title:{
                text:"汽車銷量",    //主標題文字
            },

            //顯示圖例說明，把圖表數據對應的name值顯示出來
            legend:{top:20},

            // 顯示數據信息，鼠標移動到某節點時，顯示詳細數據信息
            tooltip:{},

            // 系列列表，通過type決定圖表類型
            series:[{
                // 定義圖表名稱
                name:"寶馬",
                radius:"70%",//設置餅狀圖大小
                //pie:表示圖表類型爲餅狀圖
                type:'pie',
                // 圖表數據
                data:
                    [
                        {name:"週一", value:'10'},
                        {name:"週二", value:'15'},
                        {name:"週三", value:'13'},
                        {name:"週四", value:'18'},
                        {name:"週五", value:'23'},
                        {name:"週六", value:'31'},
                        {name:"週日", value:'40'},
                    ]
                }]
        };

        // 把配置項和數據顯示出來
        myChart.setOption(option);
    </script>
</body>
</html>

雷達圖配置方法

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/echarts.min.js"></script>
    <style type="text/css">
        #box{
            width: 600px; height: 500px;
            border: 1px solid #000000;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <!-- 給圖表準備一個容器 -->
    <div id="box"></div>

    <script>
        // 給容器初始化圖表實例
        var myChart = echarts.init(document.getElementById("box"));

        // 指定圖表配置項和數據
        var option = {
            // 定義圖表標題
            title:{
                text:"汽車銷量",    //主標題文字
            },

            //顯示圖例說明，把圖表數據對應的name值顯示出來
            legend:{},

            // 顯示數據信息，鼠標移動到某節點時，顯示詳細數據信息
            tooltip:{},

            // 雷達座標系組件，只適用於雷達圖
            radar:{
                // 雷達圖每個指示器名稱的配置項
                name:{
                    textStyle:{
                        color:"#ffffff",
                        backgroundColor:"#999999",
                        padding:[3, 5],
                        borderRadius:5
                    }
                },
                // 雷達圖的指示器，用來指定雷達圖中的多個變量（維度）
                indicator:[
                    {name:"週一", max:20},
                    {name:"週二", max:40},
                    {name:"週三", max:50},
                    {name:"週四", max:50},
                    {name:"週五", max:50},
                    {name:"週六", max:30},
                    {name:"週日", max:30},
                ]
            },

            // 系列列表，通過type決定圖表類型
            series:[{
                //radar:表示圖表類型爲雷達圖
                type:'radar',
                // 圖表數據
                data:
                    [
                        {
                            name:"奔X",
                            value:[15, 38, 48, 42, 38, 18, 22]
                        },{
                            name:"寶X",
                            value:[16, 28, 49, 49, 41, 23, 25]
                        }
                    ]
                }]
        };

        // 把配置項和數據顯示出來
        myChart.setOption(option);
    </script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

使用JavaScript日曆小部件和DHTMLX Gantt的應用場景（一）

DHTMLX Suite UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕鬆組合到單個應用程序界面中。 DHTMLX Gantt是用於跨瀏覽器和跨平臺應用程序的功

原創 2024-04-26 11:35:57

「實戰應用」如何用圖表控件LightningChart創建2D氣泡圖

LightningChartJS是Web上性能特高的圖表庫，具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。 GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用，從而實現高刷新率和流暢的動畫，常用於貿易，工程，航空航

原創 2024-04-25 11:36:06

前端面試題 - 說一下原型和原型鏈？

前端面試題 - 說一下原型和原型鏈？ JavaScript 中，萬物皆對象，對象分爲普通對象和函數對象。 所有的函數都是函數對象（typeof f === 'function'），其他都是普通對象（typeof o === 'object'

原創 2024-04-24 23:51:10

前端面試題 - 爲什麼在JS中0.1+0.2!=0.3？以及IEE 754標準

前端面試題 - 爲什麼在JS中0.1+0.2!=0.3？以及IEE 754標準 JavaScript使用Number類型表示數字（整數和浮點數），遵循 IEEE 754 標準 通過64位來表示一個數字。 首先，計算機無法直接對十進制的數字進

原創 2024-04-24 23:51:06

前端面試題 - NodeJS能用ES6模塊嗎？CommonJS 和 ES6模塊的區別是什麼？

前端面試題 - NodeJS能用ES6模塊嗎？CommonJS 和 ES6模塊的區別是什麼？ JS能寫前端web，也能寫NodeJS。 Node.js 後端應用由模塊組成，其模塊系統採用 CommonJS 規範，它並不是 JavaScri

原創 2024-04-24 23:51:06

西安站開營！AI 編碼助手通義靈碼幫大學生“整活兒”

如何更好地與 AI 爲伴，做時代的先進開發者？4 月 17 日，阿里雲推出的 AI 編程助手通義靈碼與雲工開物“高校訓練營”走進西安多所高校開啓實操培訓，結合 AI 輔助編程的發展背景、通義靈碼的具體能力和應用實操，幫助在校大學生了解人工智

原創 2024-04-24 21:12:06

「Java開發指南」如何利用MyEclipse啓用Spring DSL？（二）

本教程將引導您通過啓用Spring DSL和使用Service Spring DSL抽象來引導Spring和Spring代碼生成項目，本教程中學習的技能也可以很容易地應用於其他抽象。在本教程中，您將學習如何： 爲Spring DSL初始化

原創 2024-04-24 11:35:31

高效率Python開發工具PyCharm v2024.1——更新AI Assistant功能

JetBrains PyCharm是一種Python IDE，其帶有一整套可以幫助用戶在使用Python語言開發時提高其效率的工具。此外，該IDE提供了一些高級功能，以用於Django框架下的專業Web開發。 立即獲取PyCharm v20

原創 2024-04-23 11:34:45

瀏覽器輸入地址訪問網頁過程

瀏覽器輸入地址 當在瀏覽器中輸入網址的時候，瀏覽器其實就可能的匹配可能得 url 了，它會從歷史記錄，書籤等地方，找到已經輸入的字符串可能對應的 url，然後給出智能提示，讓你可以補全url地址。對於 google的chrome 的瀏覽

原創 2024-04-16 11:34:39

日程安排組件DHTMLX Scheduler v7.0新版亮點 - 擁有多種全新的主題

DHTMLX Scheduler是一個類似於Google日曆的JavaScript日程安排控件，日曆事件通過Ajax動態加載，支持通過拖放功能調整事件日期和時間，事件可以按天、周、月三個種視圖顯示。 備受關注的DHTMLX Schedule

原創 2024-04-11 11:34:05

ES6生成器，看似同步的異步流程控制表達風格

本文分享自華爲雲社區《3月閱讀周·你不知道的JavaScript | ES6生成器，看似同步的異步流程控制表達風格》，作者： 葉一一。 生成器 打破完整運行 JavaScript開發者在代碼中幾乎普遍依賴的一個假定：一個函數一旦開始執行

原創 2024-04-10 22:32:56

「實戰應用」如何用圖表控件LightningChart創建JS堆疊條形圖？

LightningChartJS是Web上性能特高的圖表庫，具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。 GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用，從而實現高刷新率和流暢的動畫，常用於貿易，工程，航空航

原創 2024-04-10 11:34:32

界面控件DevExtreme JS & ASP.NET Core 2024年度產品規劃預覽（一）

在本文中我們將介紹今年即將發佈的v24.1附帶的主要特性，這些特性既適用於DevExtreme JavaScript (Angular、React、Vue、jQuery)，也適用於基於DevExtreme的ASP.NET MVC/Core控

原創 2024-04-03 11:34:37

日期時間位置索引

日期時間字符串的切分是工作中常用的操作，下圖所示兩種索引方式： 第一種：包含上限 第二種：不包含上限 其中第二種方式更爲常用，如 python 語言的切片方法 s[0:4] => 2024; javascript 語言的 substring

原創 2024-03-30 01:32:26

canvas和context的關係 畫布和畫筆的關係

在HTML5中，Canvas是一個圖形繪製區域，它是一個HTML標籤，用於在網頁上動態渲染2D和3D圖形。而Context是Canvas的上下文，它是用於在Canvas上進行繪圖的接口。具體來說，有2D Context和3D Context

原創 2024-03-29 21:24:02