JavaScript
文章平均质量分 65
dragoned_123
这个作者很懒,什么都没留下…
展开
-
一份B站视频加速器脚本原理请查收
B站加速脚本原理可以参见我的上一篇文章(内含源码)JavaScript控制视频的播放速度,使用下面代码:var vd = document.getElementsByTagName("video");vd[0].playbackRate =s;使用此方法的确可以增加速度,但是如果观看多集的视频会发现,每当加载新的视频就会失效,但是B站上面设置的速度可以在加载新的视频而视频的播放速度不重新变为1倍速研究B站的本地存储发现:B站使用了会话存储存放视频的播放速度,键为bilibili_player原创 2021-03-01 20:24:12 · 1934 阅读 · 0 评论 -
学习利器,借助Tampermonkey写一个B站视频加速器脚本
借助Tampermonkey写一个B站视频加速器脚本下载Tampermonkey插件编辑加速器脚本效果完整代码如果你会JavaScript,你可以借助Tampermonkey实现对网页的控制。在播放B站视频时,作为学习党可能你会需要3倍速或者更高的倍速来观看视频,有这个脚本点击一次你能增加0.5倍速。(在firefox浏览器下进行演示,Chrome浏览器基本一致)以后的文章我会讲解一下这个脚本主要都做了写什么,为什么这么做,有兴趣的你可以关注一下。下载Tampermonkey插件下载地址:https:原创 2021-02-05 15:06:27 · 2743 阅读 · 4 评论 -
JavaScript的闭包、立即执行函数造就私有变量和方法------JavaScript学习之路21
文章目录JavaScript的闭包、立即执行函数造就私有变量和方法了解闭包过程了解立即执行函数实现私有变量和方法JavaScript的闭包、立即执行函数造就私有变量和方法了解闭包闭包是函数的内部变量可以常驻内存,且不会被外部的调用使用,这种特性可以很好的在开发中避免非同一个人命名的变量在合并时造成变量名重名,相当于创建了私有的变量或者方法let a = 0;//全局变量afunction first() { a++; alert(a);}first();//使得a+1;fi原创 2020-07-24 21:06:12 · 154 阅读 · 0 评论 -
JavaScript的Ajax请求流程------JavaScript学习之路20
文章目录JavaScript的Ajax请求流程书写方式post方式get方式JavaScript的Ajax请求流程Ajax请求的存在可以保证局部刷新页面,使得前后的交互更加完美,也减轻浏览器和服务器的符单。书写方式创建对象var xh = new XMLHttpRequest()做一个浏览器兼容var xh = null;try{ xh = new XMLHttpRequest();}catch(error){ xh = new ActiveObject("Micros原创 2020-07-23 21:27:37 · 137 阅读 · 0 评论 -
JavaScript回调函数在链式运动的作用------JavaScript学习之路19
文章目录JavaScript回调函数在链式运动的作用回调函数链式运动效果完整源码JavaScript回调函数在链式运动的作用rufuo回调函数什么是回调函数?就是在另外一个函数的参数中,传入的是一个函数指针function hello() {//回调函数 return "hello world";}function doit(str1,str2,fun) {//【注意】传入的是一个函数的形参,如果允许函数要有括号fun() console.log(str1+str2+":"+原创 2020-07-23 11:27:16 · 140 阅读 · 0 评论 -
JavaScript的多物体多方式运动------JavaScript学习之路18
文章目录JavaScript的多物体多方式运动条件效果完整源码JavaScript的多物体多方式运动条件每个物体有自己的周期函数和时间如果公用一个timer变量,会导致第二个事件影响第一个事件的运动,下图第一次第一个的运动长度,要大于第二次的第一个运动长度,因为第二次的时候点击速度比较快在第一个的运动还没有结束第二个物体就触发了,解决方法就是每个物体有自己的定时器timerlet timer = null;//公用一个timerds[0].onclick = function () {原创 2020-07-22 21:47:00 · 130 阅读 · 0 评论 -
JavaScript的缓冲运动和缓冲菜单案例------JavaScript学习之路17
文章目录缓冲运动效果完整源码缓冲菜单效果完整源码缓冲运动缓冲运动类似汽车的刹车,在刹车前速度是最大的,刹车后速度随着距离的减少而减少,达到缓冲的效果实现方法很简单,就是物体运动距离目标的位置等于物体的速度,一般调速数值为8效果最好speed = (target-postion)/调速数值postion = postion+speed效果完整源码<!DOCTYPE html><html lang="zh-CN"><head> <meta原创 2020-07-22 17:11:13 · 171 阅读 · 0 评论 -
JavaScript的运动基础,呼啦!------JavaScript学习之路16
文章目录JavaScript的运动基础如何实现条件案例效果完整源码JavaScript的运动基础如何实现要知道如何实现,就不得不说一下视频,剪辑视频都知道帧率,30帧每秒的视频,也就是一秒换30张图片,1帧1张图片,由于人的大脑有延迟,导致看出的画面是连续的。JavaScript的运动也是这个道理,通过每秒调用多少次对应的函数,在这个函数里面,可以增加元素的边距来达到元素运动的效果。条件周期的调用函数setInterval(参数1,参数2)参数1(函数):用来周期回调的函数参数2(数字原创 2020-07-21 15:39:11 · 131 阅读 · 0 评论 -
JavaScript令人蒙圈的类创建------JavaScript学习之路15
JavaScript令人蒙圈的类创建JavaScript类创建函数的方法创建类class方法创建类函数构造父类,class构造子类混合继承总结JavaScript类创建函数的方法创建类创建类的属性var animal = function (name,age) {//创建一个动物类 this.name = name;//创建名字属性 this.age = age;//创建年龄属性}创建类的方法animal.prototype.showSelf = function (原创 2020-07-21 11:22:06 · 306 阅读 · 0 评论 -
js数组、集合set、键值对map、类的遍历方法------JavaScript学习之路14
js数组、集合set、键值对map、类的遍历方法具体其它方法不多讲,主要是了解各自的特点和遍历方法数组let arr = [];//声明数组arr.push("a");//添加元素的方法arr.push("a");//添加字符串arr.push("b");arr.push(3);//添加数字arr.pop(3);//删除元素的方法你可以添加字符串,数字,函数,类到数组里面,可以重复添加,是有顺序的let arr = [];arr.push("a");arr.push("a");a原创 2020-07-20 12:53:37 · 829 阅读 · 0 评论 -
JavaScript的本地存储------JavaScript学习之路13
JavaScript的本地存储localStorage(IE8以下不兼容)特点永久存储最大存储5M只能存String方法添加存储的键值对localStorage.setItem("a","1");//方法1localStorage.b = "2";//方法2localStorage["c"] = "3";//方法3获取存储的键值对localStorage.getItem("a"));//方法1localStorage.b;//方法2localStorage["c"]原创 2020-07-18 22:45:16 · 124 阅读 · 0 评论 -
JavaScript正则表达案例之表单检验------JavaScript学习之路12
JavaScript正则表达案例之表单检要求账户名不能以数字开头,长度在6~18之间,不能有非字母,数字的符号出现密码长度要大于6,弱表示只有小写字母,或者大写字母或者数字 中表示只有数字、小写字母、大写字母 强表示包含数字、小写字母、大写字母效果完整源码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <t原创 2020-07-18 14:07:57 · 138 阅读 · 0 评论 -
JavaScript正则表达式------JavaScript学习之路11
JavaScript的正则表达式正则表达式类RegExp用类建立正则表达式通过new对象来生成一个正则表达式对象var reg = new RegExp(参数1,参数2);var t = new RegExp("^[0-5]\\d+","ig");参数1:匹配的字符串参数2:修饰符【无顺序】i 忽略大小写g 全局匹配m 如果遇到换行符就重新计算行首和行尾去掉new直接生成var reg = RegExp(参数1,参数2);var t = RegExp("^[0-5]原创 2020-07-18 11:48:40 · 103 阅读 · 0 评论 -
JavaScript仿淘宝京东放大镜效果(鼠标事件)------JavaScript学习之路10
JavaScript仿淘宝京东放大镜效果注意一定计算好放大比例,本程序放大5倍,具体放大倍数,自定效果完整源码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>放大镜效果</title> <style> #small{ width: 409.6px;/*缩原创 2020-07-17 16:49:16 · 187 阅读 · 0 评论 -
JavaScript按需求自动生成表格案例(事件委托)------JavaScript学习之路9
JavaScript生成表格案例实现两个文本框输入行和列,之后点击生成按钮,生成对应行列的表格,如果没有输入点击生成则需要弹出警告,在每一行的最后面添加删除按钮,如果删除则弹出确认信息,之后删除此行。【提示】按钮添加事件最好使用事件委托。点击查看事件委托效果完整代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>生成表格&l原创 2020-07-17 14:51:32 · 268 阅读 · 0 评论 -
JavaScript事件监听器------JavaScript学习之路8
JavaScript的事件监听器传统事件监听和事件监听器的区别传统的事件监听器只会覆盖同一个标签的相同事件即:var bt = document.getElementById("b1");bt.onclick = function () { alert("事件1");}bt.onclick = function () { alert("事件2");}效果:但是使用事件监听器后绑定相同的事件互不影响即:bt.addEventListener("click",functi原创 2020-07-17 11:30:22 · 231 阅读 · 0 评论 -
JavaScript事件委托------JavaScript学习之路7
JavaScript事件委托介绍当我们为每个标签添加点击事件的时候:for(var i = 0;i<lss.length;i++){ lss[i].onclick = function(){ lss[i].style.color = "red";//添加点击事件使得文字的颜色为红色 }}此时的每一个标签相当于有自己的一个点击事件函数,这样大大浪费了资源,没有共享,而且当在for循环结束后再添加新的标签,这些标签不会有颜色变红的效果。所以事件委托就相当于每原创 2020-07-16 19:43:46 · 182 阅读 · 0 评论 -
JavaScript的限制拖拽效果------JavaScript学习之路6
限制拖拽效果思想offsetLeft 获得元素在左边的窗口的距离offsetTop 获得元素距离上边窗口的距离document.documentElement.clientWidth || document.body.clientWidth 获取窗口宽度document.documentElement.clientHeight || document.body.clientHeight 获取窗口高度按下鼠标时var l = e.clientX - node.offsetLeft;//记录原创 2020-07-16 16:45:12 · 146 阅读 · 0 评论 -
JavaScript阻止默认行为和超链接------JavaScript学习之路5
阻止默认行为和超链接跨浏览器阻止超链接的默认行为函数e.preventDefault() e为事件对象window.event.returnValue = false下面封装了一个函数为了浏览器兼容function preventDef(e) {//做了浏览器兼容 if(e.preventDefault){ e.preventDefault(); }else { window.event.returnValue = false;//阻止关键语句原创 2020-07-16 16:41:40 · 270 阅读 · 0 评论 -
JavaScript的事件系列二keydown,keypress,获取键码------JavaScript学习之路4
JavaScript的事件系列二判断热键shift,ctrl,alt,winshiftkey 当shift按下时为true,默认为falsevar v = ev || window.event;if(v.shiftKey)ctrlkey 当ctrl按下时为truevar v = ev || window.event;if(v.ctrlKey)altkey 当alt按下时为truevar v = ev || window.event;if(v.altKey)meta原创 2020-07-15 19:36:54 · 697 阅读 · 0 评论 -
JavaScript的事件系列你知道多少?有案例哦------JavaScript学习之路3
JavaScript的事件系列鼠标事件click 单击d[0].onclick = function(){ d[0].style.backgroundColor = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+"0.5"+")";}dblclick 双击 d[1].ondblclick = function(){原创 2020-07-15 13:55:05 · 174 阅读 · 0 评论 -
JavaScript的this案例------JavaScript学习之路2
JavaScript的this案例–选项卡this是指引用的对象本身,在Java或者JavaScript里面如果是类的话,类里面的this.xxx,代表引用该类的对象自己案例:今天来理解一下this在JavaScript的含义:设计三个按钮,点击一个按钮,按钮显示选中的颜色,下面区域可以转换不同的选项卡内容class Test{ String name="luse"; String age="23岁"; public void getName(){ Syst原创 2020-07-14 12:50:37 · 94 阅读 · 0 评论 -
JavaScript节点元素的增加、删除、替换、插入操作------JavaScript学习之路1
JavaScript节点元素的增删改操作方法appendChild(xxx) 添加节点document.creatElement(xxx) 创建元素节点document.createTextNode(xxx) 创建文本节点insertBefore(xxx2,xxx1) 在1前插入2d.insertBefore(newNode2,d.firstChild);removeChild(xxx) 移除子节点d.removeChild(d.lastChild);repla原创 2020-07-13 15:19:42 · 741 阅读 · 0 评论