码迷,mamicode.com
首页 > Web开发 > 详细

js 零散知识总结

时间:2018-08-31 21:11:23      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:html   www   java   play   实现   this   tor   mis   位置   

网页播放声音

这个非常简单,我们只需要在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);

js 零散知识总结

标签:html   www   java   play   实现   this   tor   mis   位置   

原文地址:https://www.cnblogs.com/liaojiafa/p/9567412.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!