当前位置: 秋叶网络博客
JS全局复制粘贴板的精简兼容实现
作者: 秋了秋 发表时间:2018年10月15日
mysql数据库迁移导入到mongodb详细教程
: window.copy = { /*JS全局复制粘贴板的精简兼容实现 * by 秋叶博客 //www.mizuiren.com/blog/498.html * textContainer参数可以是选择器名称,也可以是文本 * callback是复制后执行的回调处理,可选,默认会弹出复制成功信息 */ text: function(textContainer, callback) { var copyTextArea = document.querySelectorAll(textContainer); //要拷贝的文本容器 var text = ''; if(!copyTextArea.length) { text = textContainer; } ...
目录: 前端编程 标签: 复制粘贴 17条评论 4466次阅读
查找闭合线条和非闭合线条
作者: 秋了秋 发表时间:2018年08月29日
mysql数据库迁移导入到mongodb详细教程
这篇文章专门解决了上述所有问题。 /* * 【寻找闭合边框】by 秋叶博客 //www.mizuiren.com/blog/497.html * linesPoints可以是线条坐标点集[[{x:1,y:2},{x:2,y:3}],[{x:4,y:2},{x:6,y:7},{x:4,y:2}]] * linesPoints也可以是线条的dom对象集合[document.querySelectorAll('polyline/line')]; * tolerance:安全间距 * */ function findCloseLine(linesPoints, tolerance) { var pointArrs = linesPoints; tolerance = tolerance || 0;/...
目录: 前端编程 标签: 边框算法,闭合边框 1条评论 5159次阅读
功能齐全好用的tooltip jquery插件
作者: 秋了秋 发表时间:2017年11月10日
mysql数据库迁移导入到mongodb详细教程
oltip = function(option){ /* * 提示框jq插件 * Author by 秋叶博客 //www.mizuiren.com/blog/494.html * option参数 * { * background: "#ddd",(option可选) * position: "top|left|bottom|right",(option可选) * content: "这是实例提示文字!",(needed必选) * event: "hover|click",(event type事件类型, 可选) * color: "#3c4751"(font color文字颜色) * borderColor: "#ddd",(color 颜色 option可选) * fontSize: "14px",(fon...
目录: 前端编程 标签: jq插件,tooltip 7条评论 17758次阅读
简易无缝滚动功能齐全轮播组件
作者: 秋了秋 发表时间:2017年10月22日
mysql数据库迁移导入到mongodb详细教程
片式轮播,只要是个轮播都可以实现: /* * 轮播图组件 * by:秋叶博客 * 轮播内容直接父级容器ul的class为parts * 前进按钮class为next,后退按钮class为prev * 小点容器ul的class为dot。 * */ function initSlider($contaner){ var $ul = $("ul.parts",$contaner); var $liw, $dot = $('.dot',$contaner),$dotLi = $('>li',$dot), lenth, $Li = $('>li',$ul); var speed = 5000; initElement(); initCss(); function initCss()...
目录: 前端编程 标签: 轮播特效 10条评论 18715次阅读
智取百度、谷歌分词技术实现智能模糊搜索
作者: 秋了秋 发表时间:2017年08月27日
mysql数据库迁移导入到mongodb详细教程
圳,深圳,我爱,深圳市,深圳市爱 前端请求:/search?keywords=秋叶网络博客 分词结果:秋叶网络博客,博客,秋叶,网络,秋叶博客 前端请求:/search?keywords=生活 志趣 爱 分词结果:志趣,生活,爱上,爱,爱生活爱 前端请求:/search?keywords=技术是对生活最完美的诠释 分词结果:对生活最好的诠释,对生活的诠释,完美诠释,生活,是对,生活最完美的诠释,技术,是最好的诠释,生活好,对生活,最完美的诠释,完美,是对生活最好的诠释,为,完美的,...
目录: 前端编程 标签: 分词搜索,搜索引擎 10条评论 21400次阅读
JavaScript脚本对LRC歌词折叠展开
作者: 秋了秋 发表时间:2017年06月20日
mysql数据库迁移导入到mongodb详细教程
换: [ti:深夜地下铁] [ar:陶钰玉] [al:其实我们都寂寞] [by:秋叶博客] [00:00:00]深夜地下铁 [00:04:00]作词、作曲:张超 [00:06:00]演唱:陶钰玉 [00:12:00][01:03:16][01:14:48][02:06:91][02:17:05][03:23:37] [00:13:91]地铁站静悄悄 [00:17:97]心开往下一秒 [00:20:96]你微笑的嘴角 [00:23:97]画出甜蜜符号 [00:27:00]萤火虫在闪耀 [00:30:08]霓虹灯在舞蹈 [00:33:28]想念你转身的味道 [00:38:04][01:39:48][02:19:58][02:44:10...
目录: 前端编程 标签: 折叠LRC歌词 1条评论 8355次阅读
Html字符串筛选提取指定节点
作者: 秋了秋 发表时间:2017年03月17日
mysql数据库迁移导入到mongodb详细教程
/div><div class="dream" id="javasript">var me="秋叶";</div></i><div class="d"><strong class="this">人文风情<strong>哈哈哈哈</strong><li></li> </strong></div>what?</div><div class="good">dewfq</div><div class="xiaoming" id="xiao">小红</div>'; #page77 .txt{color:#A4A1A1;} 提取节点示例: getNode(".xiaomi...
目录: 前端编程 标签: 字符串提取节点 1条评论 9382次阅读
使用Html5绘制动感音乐频谱教程
作者: 秋了秋 发表时间:2017年02月07日
mysql数据库迁移导入到mongodb详细教程
W3C为我们提供了获取Audio数据的各种API,借助这些API我们能获取到每时每帧的动态数据,有了数据我们就可以尽所能发挥想象力创造所有你能想象的东西,给自己来一场视觉盛宴,加上Html5的canvas舞台,完全可以比flash更具有惊艳的效果哦。 #page473_canvas{ background: black; border-bottom: 1px solid #ccc; } #page473_qiuyemusic{ text-align: center; margin-bottom:20px; } #page473_mp3,#page473_swith-btn{ margin:0 auto; width:600px; } #page473_mp3{ border-top: 1px solid #ccc; } #page473_swith-btn>span{ cursor:pointer; } .page473_player{ background: black;width:600px;height: 445px;margin:0 auto; overflow: hidden; } 您的浏览器不支持canvas,请更换高级版的浏览器! 柱状 音响 火焰 乒乓球 灯光 (function(){ var canvas=document.querySelector("#page473_canvas"), context = canvas.getContext('2d'); var width=canvas.width, height=canvas.height; var audio=document.querySelector("#page473_mp3"); window.AudioContext =window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext; try { var audioContext = new window.AudioContext(); } catch (e) { throw new Error("您的浏览器不支持!"); } var analyser = audioContext.createAnalyser(), source = audioContext.createMediaElementSource(audio); source.connect(analyser);//截取音频信号 analyser.connect(audioContext.destination);//声音连接到扬声器 function getSource(draw){ if(audio.paused){ return false; } var data = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(data);//得到音频能量值 var playerTimeDomainData = new Uint8Array(analyser.fftSize); analyser.getByteTimeDomainData(playerTimeDomainData);//得到频谱 var volumn = Math.max.apply(null, playerTimeDomainData) -Math.min.apply(null, playerTimeDomainData); context.clearRect(0, 0, width, height); switch (parseInt(draw)) { case 1: drawColumns(data); break; case 2: drawSpeakers(volumn); break; case 4: drawFires(volumn); break; case 5: drawBalls(data); break; case 6: drawLights(volumn); break; default: drawColumns(data); break; } } function drawSpeaker(){ var radius,gradient,border; function circle(x,y,r,i){ border=r+30; if(i==1){ context.beginPath(); context.globalCompositeOperation = "source-over"; gradient= context.createRadialGradient(x, y, r, x, y, border); gradient.addColorStop(0.2,'rgb(5,5,3)'); gradient.addColorStop(0.5,'rgb(41,42,37)'); gradient.addColorStop(1,'rgb(5,5,3)'); context.fillStyle = gradient; context.arc(x, y, border, 0, Math.PI*2, true); context.fill(); context.closePath(); context.beginPath(); gradient= context.createRadialGradient(x, y, r/2, x, y, r); gradient.addColorStop(0.2,'rgb(36,37,32)'); gradient.addColorStop(1,'rgb(27,25,29)'); context.fillStyle = gradient; context.arc(x, y, r, 0, Math.PI*2, true); context.fill(); context.closePath(); }else{ context.beginPath(); if(i==4){ gradient= context.createRadialGradient(x, y, 1, x, y, r); gradient.addColorStop(0,'rgb(125,125,125)'); gradient.addColorStop(0.8,'rgb(25,25,25)'); }else{ gradient= context.createRadialGradient(x, y, r/2, x, y, r); gradient.addColorStop(0,'rgb(36,37,32)'); gradient.addColorStop(1,'rgb(27,25,29)'); context.shadowOffsetX = 0; context.shadowOffsetY = 0; context.shadowBlur = 15; context.shadowColor = 'rgba(0, 0, 0, 0.8)'; } context.fillStyle = gradient; context.arc(x, y, r, 0, Math.PI*2, true); context.fill(); context.closePath(); } } return function(data){ if(data>300){data=300;}//设置光圈最大为300 if(data < 210){data=210;}//设置光圈最小为210 var r=data/2-20; for(var i=1;i < 5;i++){ if(!radius){ radius=r; }else{ if(radius <= r-7){ radius=r; } } circle(150, 250, radius/i,i); circle(width-150, 250, radius/i,i); } radius-=2; if(radius < 0){radius=0;} } } function drawLight(){ var sdeg1=35,add1=0.01,sdeg2=60,add2=-0.02,gradient ; function drawbright(radius,sdeg,x,y,data){ var edeg=sdeg+45 var sX=radius*Math.cos(Math.PI/180*sdeg),sY=radius*Math.sin(Math.PI/180*sdeg), eX=radius*Math.cos(Math.PI/180*edeg),eY=radius*Math.sin(Math.PI/180*edeg); context.beginPath(); gradient = context.createRadialGradient(x, y, 0, x, y, radius); gradient.addColorStop(0.2, 'rgba(255,255,255,1)'); gradient.addColorStop(1, 'rgba(0,0,0,0)'); context.fillStyle=gradient; context.globalAlpha=0.7+data/1000; context.arc(x,y,radius,Math.PI/180*sdeg,Math.PI/180*edeg,false); context.moveTo(x,y); context.lineTo(sX+x,sY+y); context.lineTo(eX+x,eY+y); context.lineTo(x,y); context.fill(); context.closePath(); if(sdeg1>=90){ add1=-0.01; }else if(sdeg1 < 60){ add1=0.01; } if(sdeg2>=90){ add2=-0.02; }else if(sdeg2 < 30){ add2=0.02; } sdeg1+=add1; sdeg2+=add2; } return function(data){ if(data>230){ return false; } drawbright(400,sdeg1,200,-20,data); drawbright(400,sdeg2,width-200,-20,data); } } function drawBall(){ var ballArr=[],start=102,radius=10,gradient; for(var i=1,len=parseInt(width/(radius*2+10));i < len ;i++){ ballArr.push({ x:(radius*2+10)*i, y:radius, speed:0 }); } return function(data){ for(var i=0;i150){ //if(Math.abs(thisBall.speed)< =1){//This is another effect, please close the first line under parent parent "if" when open this line; thisBall.speed=thisBall.dataY*12/220; } }else if(thisBall.y>=height-radius){ thisBall.y=height-radius; } context.fill(); context.closePath(); } } } function drawColumn(){ var gradient,lineHeight,capArr=[], start=100,//从X轴何处坐标开始画 lineWidth=3,//柱体宽度 lineGap=6,//柱体间距 dataGap=10;//每隔多少取一个数据用于绘画,意抽取片段数据来反映整体频谱规律 var count=parseInt((width-start*2)/(lineWidth+lineGap)); var thisCap,drawX; return function(data){ for(var i=0;ilineHeight){ capArr[i]=lineHeight; } }else{ capArr[i]=lineHeight; } context.lineWidth=lineWidth; drawX=start+(lineWidth+lineGap)*i; gradient = context.createLinearGradient(drawX, height, drawX, lineHeight); gradient.addColorStop(1, 'rgba(255,0,0,.5)'); gradient.addColorStop(0.5, 'rgb(55,255,0)'); gradient.addColorStop(0, 'rgba(255,255,255,.5)'); /*画频谱柱条*/ context.beginPath(); context.strokeStyle = gradient; context.moveTo(drawX,height); context.lineTo(drawX,lineHeight); context.stroke(); context.closePath(); /*绘制帽头*/ context.beginPath(); context.lineWidth=1; context.fillStyle = "rgba(255,255,255,.5)"; context.arc(drawX,capArr[i]-3,lineWidth/2,0,Math.PI*2,true); context.fill(); context.closePath(); capArr[i]+=0.5 } } } function drawFire(){ var particles = []; var particle_count = 150; for(var i = 0; i < particle_count; i++) { particles.push(new particle()); } function particle(parseData) { parseData=parseData||0; this.speed = {x: -1+Math.random()*2, y: -5+Math.random()*5}; this.location = {x: width/2, y: height/2+35}; this.radius = 0.5+Math.random()*1; this.life = 20+Math.random()*10; this.death = this.life; this.r = 255; this.g = Math.round(Math.random()*155); this.b = 0; } return function(data){ var parseData=Number((data/1000+0.2).toFixed(2)); for(var i = 0; i < particles.length; i++){ var p = particles[i]; context.beginPath(); context.compositeOperation = "source-over"; context.globalCompositeOperation = "lighter"; p.opacity = Math.round(p.death/p.life*100)/100; var gradient = context.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius); gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")"); gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")"); gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)"); context.fillStyle = gradient; //context.globalAlpha=0.5+data/1000; context.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false); context.fill(); p.death--; p.radius++; p.location.x += (p.speed.x); p.location.y += (p.speed.y); if(p.death < 0 || p.radius < 0){ particles[i] = new particle(parseData); } } } } function addEvent(){ var type=document.getElementById("page473_swith-btn").getElementsByTagName("input"); var span=document.getElementById("page473_swith-btn").getElementsByTagName("span"); for(var i=0;i 第一步 :获取音乐数据。使用API在音乐播放的时候在音源和扬声器中间截断信号并把信号保存下来,再通过代码连接扬声器把声音放出来,这个处理几乎不花时间,所以不用担心造成声音的迟缓。因为计算机的速度快如闪电,不,是闪电不如。 var canvas=document.querySelector("#canvas"), context = canvas.getContext('2d'); var width=canvas.width, height=canvas.height; var audio=document.querySelector("#mp3"); window.AudioContext =window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext; try { var audioContext = new window.AudioContext(); } catch (e) { throw new Error("您的浏览器不支持!"); } var analyser = audioContext.createAnalyser(), source = audioContext.createMediaElementSource(audio); source.connect(analyser);//截取音频信号 analyser.connect(audioContext.destination);//声音连接到扬声器 var data = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(data);//得到音频能量值 var playerTimeDomainData = new Uint8Array(analyser.fftSize); analyser.getByteTimeDomainData(playerTimeDomainData);//得到频谱 通过这段代码,我们就获取到了音乐的音频能量和频谱1024长度的数组,这两个数据分别存在data和playerTimeDomainData里面,所以剩下的都是围绕着两个数值进行操作。 第二步 :绘制动画。这就靠JavaScript编程“艺术”了,动画的实现有传统的Dom操作,也有hml5的Canvas绘图技术,在这里我用canvas,这样会比较流畅,因为频繁操作dom开销是很大的。 简单的事情我们绝不说得复杂,复杂的事情那就不要说吧,具体看代码实现~ [showCode]查看代码[/showCode] github地址:https://github.com/mizuiren/Javascript-Animations/blob/master/canvas-music/mp3.html 觉得好的话就打个小星星吧~...
目录: 前端编程 标签: h5music 11条评论 11275次阅读
Js、Css3仿手机QQ资料个性名片标签特效
作者: 秋了秋 发表时间:2017年01月20日
mysql数据库迁移导入到mongodb详细教程
***************************/ //尊重劳动成果 //版权所有:秋叶 //作者博客地址://www.mizuiren.com/ //转载注明出处,谢谢! /***************************/ //原生js实现环形菜单创建 function circleLayout(para){ var count=para.targetElement.length; if(!count||!para.pointElement){ throw new Error("请传入布局元素参数targetElement和pointElement !"); return false; } var beginAngle=para.beginAngle; var endAngl...
目录: 前端编程 标签: qq资料名片 2条评论 8061次阅读
Javascript中一些吓唬人的怪异写法
作者: 秋了秋 发表时间:2016年10月13日
mysql数据库迁移导入到mongodb详细教程
吧。 1.函数前面加感叹号是几个意思 !function a(){ alert("秋叶") }(); 在函数前面加个感叹号表示立即执行的意思,不需要调用函数,相当于(function a(){alert("秋叶")})();除了加感叹号,还有加+,-,~一元操作符号以及void,都是表示立即执行的意思,不过返回值不是正常函数返回的undefined,而是其他。 2.let,const是什么鬼 for(let i=0;i<1000;i++){ let sum=0; const name="秋叶"; sum+=i; } 这是声明变量的方式,相当于平...
目录: 前端编程 标签: javascript 4条评论 9634次阅读

登 录
点击获取验证码
还没账号?点击这里