网页播放声音

这个非常简单,我们只需要在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 零散知识总结的更多相关文章

  1. js 零散知识

    # 同一种类型的事件注册多个事件句柄,后面的不会覆盖前面的事件 # event.which == 13,13代表回车 # parsley.js验证框架 # JSON.stringify, avoid ...

  2. css,js零散知识的整理

    在同一个dom上以冒泡和捕获的方式绑定一个事件,如果事件源是该元素,则是先绑定的哪一个就先执行哪一个,事件源是dom的子孙节点,则先执行捕获事件

  3. 零散的JS和node.js小知识

    JS的连续赋值和曾经出现的怪异情况 let a=1; let b=a=3; 如上的真实赋值过程 => a=1 => a=3 => b=3 => 一般来说,等号是从右向左赋值的 ...

  4. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  5. iOS网络相关零散知识总结

    iOS网络相关零散知识总结 1. URL和HTTP知识 (1) URL的全称是Uniform Resource Locator(统一资源定位符). URL的基本格式 = 协议://主机地址/路径   ...

  6. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  7. Node.js基础知识

    Node.js入门   Node.js     Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...

  8. 网站开发进阶(十五)JS基础知识充电站

    JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...

  9. NodeJs>------->>第三章:Node.js基础知识

    第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info  方法 console.log(" node app1.js 1> ...

随机推荐

  1. Java weak reference

    一个对象被回收,必须满足两个条件: 没有任何引用指向它和GC在运行.把所有指向某个对象的引用置空来保证这个对象在下次GC运行时被回收. Object c = new Car(); c = null; ...

  2. unity游戏设计与实现 --读书笔记(一)

    1,  游戏入门的一些知识点,游戏对象GameObject(角色), 组件Compoent(角色的功能),资源Asset(美术素材呵呵音频等的数据),场景Scene(用以放置各个角色,负责展示画面), ...

  3. 小甲鱼Python第十六讲课后习题--017函数

    函数的定义用def,函数名后要用冒号 函数的返回:函数中使用return   测试题: 0. 你有听说过DRY吗? DRY是指Don't Repeat Yourself ,特指在程序设计以及计算中避免 ...

  4. HTML5 学习03——内联 SVG

    什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...

  5. Ubuntu远程连接MySQL(connection refused)解决方法

    一.判断ubuntu是否开启防火墙 sudo ufw status 开放防火墙3306端口 sudo ufw allow 3306 二.查看3306端口是否打开  注意:红色框框表示3306绑定的ip ...

  6. JavaScript数组(二)实例

    一.Js 数组示例常用操作. $(function () { Javascript数组学习 var nums = new Array([10], [5],[ 8], [2], [3]); 数组反转 n ...

  7. 我的第一个正式react demo

    以前在看深入浅出react和redux的时候, 那个demo 总是用creat-react-app 创建的, 现在终于可以实现自己手动搭建一个简单的demo了. 1.首先新建一个文件夹, 执行npm ...

  8. ArrayList代码学习

    ArrayList (数组链表)使用Object数组作为存储. /** * The array buffer into which the elements of the ArrayList are ...

  9. SpringBoot2.0针对请求参数@RequestBody验证统一拦截

    title: "SpringBoot2.0针对请求参数@RequestBody验证的统一拦截"categories: SpringBoot2.0 Shirotags: Spring ...

  10. 远程FTP下载文件

    现在存在以下环境: 远程服务器:192.168.1.107 用户名:dt 密码:dt123 需要从该服务器上下载文件到本地 1.登录(进入到那个目录登录的 ,文件就会被下载到该文件) ftp 192. ...