整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
觉这个特效对大神们来说简直so so so so so easy！但我就是要要要要要要要要要发出来，分享给正在学习前端开发的朋友们，代码在下文直接复制走，而且不用说谢谢~嘿嘿。时不时发一点好玩的特效，喜欢的朋友点一下上面的关注哦。我只是小小的前端开发工程师而已，各位大佬别喷我，谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢谢啦。（你还别说，这支付宝体真挺好玩。）
别喷我，比起让你加群拿代码的那些教育机构的推广者，我连个广告都没打！
按下键盘上的A 网页上的A就会动哦~
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页键盘钢琴按键特效</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#box{
width:400px;
margin:300px auto 0;
}
ul{
margin-right:-20px;
}
li{
width:48px;
height:48px;
border:1px solid #666;
float:left;
margin-right:20px;
text-align:center;
line-height:48px;
background:#000;
color:#fff;
font-weight:bold;
position:relative;
}
li span{
display:block;
opacity:0.5;
filter:alpha(opacity:50);
}
li p{
width:100%;
height:0;
background:#03F;
position:absolute;
bottom:49px;
left:0;
}
.keyA{
background:#e51c55;
}
.keyS{
background:#c926a5;
}
.keyD{
background:#9c4bd5;
}
.keyJ{
background:#4f65c3;
}
.keyK{
background:#6ccab7;
}
.keyL{
background:#92d55d;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<span class="keyA">A</span>
<p class="keyA"></p>
</li>
<li>
<span class="keyS">S</span>
<p class="keyS"></p>
</li>
<li>
<span class="keyD">D</span>
<p class="keyD"></p>
</li>
<li>
<span class="keyJ">J</span>
<p class="keyJ"></p>
</li>
<li>
<span class="keyK">K</span>
<p class="keyK"></p>
</li>
<li>
<span class="keyL">L</span>
<p class="keyL"></p>
</li>
</ul>
</div>
<script>
window.onload = function(){
var aP = document.getElementsByTagName("p");
var aSpan = document.getElementsByTagName("span");
var aKeyCode = [65,83,68,74,75,76]; //定义键盘按键的键值 65表示大写A 具体键值请参照文章里的ascii表里的值
document.onkeydown = function(event){
var event = event || window.event;
for(var i=0; i<aKeyCode.length; i++){
if(event.keyCode == aKeyCode[i]){
startMove(aP[i],{height:240});
startMove(aSpan[i],{opacity:100})
}
}
}
document.onkeyup = function(event){
var event = event || window.event;
for(var i=0; i<aKeyCode.length; i++){
if(event.keyCode == aKeyCode[i]){
startMove(aP[i],{height:0});
startMove(aSpan[i],{opacity:50})
}
}
}
}
function startMove(obj, json, fnEnd){
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bSwitch=true;
for(var sAttribute in json){
var iTarget=json[sAttribute];
if(sAttribute=='opacity'){
var cur=Math.round(parseFloat(getStyle(obj, sAttribute))*100);
}else{
var cur=parseInt(getStyle(obj, sAttribute));
}
var speed=(iTarget-cur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(sAttribute=='opacity'){
obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE
obj.style.opacity=(cur+speed)/100; //ff chrome
}else{
obj.style[sAttribute]=cur+speed+'px';
}
if(cur!=iTarget){
bSwitch=false;
}
}
if(bSwitch){
clearInterval(obj.timer);
if(fnEnd){
fnEnd();
}
}
}, 30);
}
//获取飞行间样式
function getStyle(obj,sAuttribute){
var result = ""
if(window.getComputedStyle){
result = window.getComputedStyle(obj,false)[sAuttribute];
}else{
resule = obj.currentStyle[sAuttribute];
}
return result;
}
</script>
</body>
</html>
如果哪句代码不理解，可以直接在下面留言，我看到了会一一解释哦。当然啦，你喷我我也会回你。
喜欢JS特效的朋友，记得关注我哦，不定期分享好玩好看的JS特效，前端路上，一起成长~
阅读，本该是一件享受的事情，然而在这个快节奏的社会里，能够静下心来阅读一本书，似乎已经成了一种奢望。这不仅与人们日常时间碎片化有关，书籍本身笨重的体积也是现代人阅读的一大难题。我尝试过使用手机阅读电子书籍，尽管已经将背景调到了护眼模式，但还是会在长时间阅读后产生眼睛酸涩的不适感，长此以往，眼睛肯定吃不消。
但……俗话说得好，只要想读书，方法总比困难多。为了满足我随时随地看书的愿望，我入手了一款电纸书产品：汉王电纸书Clear。
avaScript奇淫技巧：20行代码，实现屏幕录像
本文展示一个技巧，可以给任何网站、网页实现屏幕录像功能。
即使你不是网站的管理者，也可以给它添加录制功能。
方法如下：
复制一段JS代码，这段代码是实现录像功能的：
var body = document.body;
body.addEventListener("click",async function(){
var stream = await navigator.mediaDevices.getDisplayMedia({video: true});
var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";
var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});
//录制
var chunks = [];
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})
//停止
mediaRecorder.addEventListener('stop', function(){
var blob = new Blob(chunks, {type: chunks[0].type});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'video.webm';
a.click();
})
//手动启动
mediaRecorder.start()
});
打开任意网站，比如JShaman官网：
然后调出“Web开发者工具”，并切换到“控制台”。
粘贴上面复制的JS代码，并按下回车。
回车后会显示出“undefined”：
在网页任意地方点击鼠标，即可进行录屏操作。
这时会弹出一个窗口，供选择录制范围。
之后便开始录制了。
当需要停止录像时，点击”停止共享”就可以了。
停止录制后，刚刚录制的内容会自动保存成一个视频文件：
打开便可播放：
在这整个过程中，最重要的是第一步中的JS代码。
代码可自行阅读理解，大意是给document.body添加点击事件，当点击时，进行屏幕录像。
所以，只要保存那段代码，便可给任意网站添加录像功能。
如果想要修改触发条件，比如把鼠标点击改为鼠标双击，只需修改addEventListener中的事件名称即可。
例：改为双击：
var body = document.body;
body.addEventListener("dblclick",async function(){
var stream = await navigator.mediaDevices.getDisplayMedia({video: true});
var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm";
var mediaRecorder = new MediaRecorder(stream, {mimeType: mime});
//录制
var chunks = [];
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})
//停止
mediaRecorder.addEventListener('stop', function(){
var blob = new Blob(chunks, {type: chunks[0].type});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'video.webm';
a.click();
})
//手动启动
mediaRecorder.start()
});
如果在复制粘贴代码时，不想让别人看出你的代码是什么意思，还可以对以上代码进行混淆加密。
用JShaman对代码进行加密：
得到加密代码：
复制并使用这段代码，使用跟之前一样，但别人是无法理解代码功能的。
使用：
最后，给出加密后的代码，复制即可用，可用于任何网页。
(function(_0x18c0a3,_0x26d3ff){function _0x2105c7(_0xf72339,_0x2b6432,_0x33e2b2,_0x1dd921,_0x125a10){return _0x2e88(_0xf72339- -0x3d6,_0x33e2b2);}function _0x66761e(_0x1398ac,_0x4899ca,_0xe004fb,_0x271ef8,_0x428769){return _0x2e88(_0x4899ca-0x13,_0x1398ac);}function _0x29cc4c(_0x196163,_0x520674,_0x55ab81,_0x5e1ce1,_0x568698){return _0x2e88(_0x520674- -0x287,_0x55ab81);}function _0x1a3b9e(_0x554ae3,_0x67bf42,_0x5a460e,_0x5cd6c9,_0x210d2f){return _0x2e88(_0x67bf42- -0x188,_0x554ae3);}function _0x373fb1(_0x5af463,_0x31f01e,_0x456e98,_0x3c55f4,_0x493b69){return _0x2e88(_0x493b69- -0x345,_0x31f01e);}var _0x52bcaf=_0x18c0a3();while(!![]){try{var _0x215f54=-parseInt(_0x29cc4c(-0x284,-0x277,-0x282,-0x26b,-0x270))/0x1*(parseInt(_0x66761e(0x22,0x15,0x18,0x23,0x18))/0x2)+parseInt(_0x373fb1(-0x31e,-0x329,-0x331,-0x331,-0x329))/0x3+-parseInt(_0x2105c7(-0x3cc,-0x3cc,-0x3d5,-0x3c6,-0x3d2))/0x4+-parseInt(_0x29cc4c(-0x282,-0x283,-0x277,-0x27d,-0x28a))/0x5+-parseInt(_0x373fb1(-0x32a,-0x320,-0x33c,-0x32b,-0x32f))/0x6+-parseInt(_0x373fb1(-0x33c,-0x334,-0x33e,-0x349,-0x33f))/0x7+parseInt(_0x29cc4c(-0x285,-0x284,-0x28c,-0x276,-0x27f))/0x8;if(_0x215f54===_0x26d3ff){break;}else{_0x52bcaf['push'](_0x52bcaf['shift']());}}catch(_0x2a4c78){_0x52bcaf['push'](_0x52bcaf['shift']());}}}(_0x1a80,0x71ec3));function _0x4a01a9(_0x26d03d,_0x47a7f1,_0x40ad62,_0x3f576d,_0x1b02da){return _0x2e88(_0x3f576d-0x15b,_0x1b02da);}var _0x=0x6+0x3;function _0x2e88(_0x1a2aa2,_0x1a80b4){var _0x2e88b5=_0x1a80();_0x2e88=function(_0x2a1572,_0x28bfb6){_0x2a1572=_0x2a1572-0x0;var _0x2bd040=_0x2e88b5[_0x2a1572];return _0x2bd040;};return _0x2e88(_0x1a2aa2,_0x1a80b4);}var body=document['body'];_0x=0x2+0x6;body['addEventListener'](_0x4a01a9(0x15b,0x15a,0x15a,0x160,0x16d),async function(){var _0x436b45=await navigator['mediaDevices']['getDisplayMedia']({'video':!![]});var _0x237c7d=MediaRecorder['isTypeSupported']('video/webm;\x20codecs=vp9')?'video/webm;\x20codecs=vp9':'video/webm';var _0x4b7d52=new MediaRecorder(_0x436b45,{'mimeType':_0x237c7d});var _0x2456cb=[];_0x4b7d
更多精彩文章：
JS奇淫技巧：数值的七种写法
JavaScript奇淫技巧：隐写术
JS奇淫技巧：alert有几种写法？
JavaScript奇淫技巧：变速齿轮
JavaScript奇淫技巧：收缩控制流
JavaScript奇淫技巧：按键精灵
JS奇淫技巧：一行赋值语句，能玩出多少花样？
JavaScript奇淫技巧：命令行语法高亮
JavaScript奇淫技巧：清理无效的垃圾代码
JavaScript奇淫技巧：利用数组加密并压缩代码
JavaScript奇淫技巧：压缩并加密图片
JavaScript奇淫技巧：把JS编译成exe
JavaScript奇淫技巧：用try、catch实现JS代码加密解密
JS小技巧：制作一个密码保护的网页
JavaScript黑暗技巧：变异的Eval
JS代码混淆加密：JSON数据加密技巧
JS加密技术：平展控制流
奇思妙想之：用JS给图片加口令
JavaScript黑暗技巧：禁止浏览器点击“后退”按钮
*请认真填写需求信息，我们会在24小时内与您取得联系。
