js 零散知識總結

網頁播放聲音

這個很是簡單，咱們只須要在html和js設置便可。首先看html代碼

html代碼

<audio id="sound" autoplay="autoplay"></audio>
<button onclick="playAlarmSound()">播放</button>

JS代碼

function playAlarmSound(){
    var soundsUrl = "/static/sounds/ding.wav"
    document.getElementById("sound").src=soundsUrl
}

這個時候，點擊下"播放"按鈕便可播放了。

慢慢滑動上下滾動條

關鍵js代碼

$(document).ready(
            runflag = true,  // 是否可以滑動的標誌
            dscrollTopTmp = 0,   // 當前滑動位置
            autoRoll()
    );
    
    function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function autoRoll(){
        runflag = true  // 是否可以滑動的標誌
        var d=document.getElementById("LegacyAlarmsContent");
        var dlen = d.scrollHeight/3; // scroll的高度1/3,便可滑到最底部了。
        //var dscrollTopTmp = 0;
         while(dscrollTopTmp < dlen && runflag){
            d.scrollTop = dscrollTopTmp;
            dscrollTopTmp=dscrollTopTmp+1;
            await sleep(200)
            if(dscrollTopTmp+2>dlen ) {
                dscrollTopTmp=0  // 等於0的話直接滑動到最頂部了
            }
        }
    }
    
    function stopAutoRoll() {
        runflag = false
    }

HTML代碼

<div id="LegacyAlarmsContent" style="height:455px;overflow-y: auto">

</div><!-- /.col -->

sleep函數

這段主要使用了promise對象來實現的, 什麼是Promise對象？這種「承諾未來會執行」的對象在JavaScript中稱爲Promise對象。，promise對象的解釋請看這裏

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log('Taking a break...');
  await sleep(2000);
  console.log('Two second later');
}

demo();

replace替換掉全部指定的值

String.prototype.myReplace=function(f,e){//吧f替換成e
    var reg=new RegExp(f,"g"); //建立正則RegExp對象   
    return this.replace(reg,e); 
}

//應用示例
var str='我是生長在中國南方的純正中國人';
var newstr=str.myReplace('中國','天朝');
alert(newstr);