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);
js 零散知识总结的更多相关文章
- js 零散知识
# 同一种类型的事件注册多个事件句柄,后面的不会覆盖前面的事件 # event.which == 13,13代表回车 # parsley.js验证框架 # JSON.stringify, avoid ...
- css,js零散知识的整理
在同一个dom上以冒泡和捕获的方式绑定一个事件,如果事件源是该元素,则是先绑定的哪一个就先执行哪一个,事件源是dom的子孙节点,则先执行捕获事件
- 零散的JS和node.js小知识
JS的连续赋值和曾经出现的怪异情况 let a=1; let b=a=3; 如上的真实赋值过程 => a=1 => a=3 => b=3 => 一般来说,等号是从右向左赋值的 ...
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- iOS网络相关零散知识总结
iOS网络相关零散知识总结 1. URL和HTTP知识 (1) URL的全称是Uniform Resource Locator(统一资源定位符). URL的基本格式 = 协议://主机地址/路径 ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
- Node.js基础知识
Node.js入门 Node.js Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...
- 网站开发进阶(十五)JS基础知识充电站
JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...
- NodeJs>------->>第三章:Node.js基础知识
第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info 方法 console.log(" node app1.js 1> ...
随机推荐
- Java weak reference
一个对象被回收,必须满足两个条件: 没有任何引用指向它和GC在运行.把所有指向某个对象的引用置空来保证这个对象在下次GC运行时被回收. Object c = new Car(); c = null; ...
- unity游戏设计与实现 --读书笔记(一)
1, 游戏入门的一些知识点,游戏对象GameObject(角色), 组件Compoent(角色的功能),资源Asset(美术素材呵呵音频等的数据),场景Scene(用以放置各个角色,负责展示画面), ...
- 小甲鱼Python第十六讲课后习题--017函数
函数的定义用def,函数名后要用冒号 函数的返回:函数中使用return 测试题: 0. 你有听说过DRY吗? DRY是指Don't Repeat Yourself ,特指在程序设计以及计算中避免 ...
- HTML5 学习03——内联 SVG
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...
- Ubuntu远程连接MySQL(connection refused)解决方法
一.判断ubuntu是否开启防火墙 sudo ufw status 开放防火墙3306端口 sudo ufw allow 3306 二.查看3306端口是否打开 注意:红色框框表示3306绑定的ip ...
- JavaScript数组(二)实例
一.Js 数组示例常用操作. $(function () { Javascript数组学习 var nums = new Array([10], [5],[ 8], [2], [3]); 数组反转 n ...
- 我的第一个正式react demo
以前在看深入浅出react和redux的时候, 那个demo 总是用creat-react-app 创建的, 现在终于可以实现自己手动搭建一个简单的demo了. 1.首先新建一个文件夹, 执行npm ...
- ArrayList代码学习
ArrayList (数组链表)使用Object数组作为存储. /** * The array buffer into which the elements of the ArrayList are ...
- SpringBoot2.0针对请求参数@RequestBody验证统一拦截
title: "SpringBoot2.0针对请求参数@RequestBody验证的统一拦截"categories: SpringBoot2.0 Shirotags: Spring ...
- 远程FTP下载文件
现在存在以下环境: 远程服务器:192.168.1.107 用户名:dt 密码:dt123 需要从该服务器上下载文件到本地 1.登录(进入到那个目录登录的 ,文件就会被下载到该文件) ftp 192. ...