当前位置: 秋叶网络博客
JS全局复制粘贴板的精简兼容实现
作者: 秋了秋 发表时间:2018年10月15日
mysql数据库迁移导入到mongodb详细教程
复制。strong 6.支持独立复制网页中不存在的文本(纯程序复制)。strong 6.支持svg文本的复制。strong javascript代码: window.copy = { /*JS全局复制粘贴板的精简兼容实现span * by 秋叶博客 http://www.mizuiren.com/498.htmlspan * textContainer参数可以是选择器名称,也可以是文本span * callback是复制后执行的回调处理,可选,默认会弹出复制成功信息span */span text: function(textContainer, callback) { var copyTextArea = document.querySelectorAll(textContainer); //要拷贝的文本容器span var text = ''; if(!copyTextArea.length) { tex...
目录: 前端编程 标签: 复制粘贴 7条评论 633次阅读
查找闭合线条和非闭合线条
作者: 秋了秋 发表时间:2018年08月29日
mysql数据库迁移导入到mongodb详细教程
框和非闭合边框进行分类。strong span li 4.收集它们的坐标信息加以利用。strong span li ul 那么你要好好看这篇文章,这篇文章专门解决了上述所有问题。 /*span * 【寻找闭合边框】by 秋叶博客 http://www.mizuiren.com/497.htmlspan * linesPoints可以是线条坐标点集[[{x:1,y:2},{x:2,y:3}],[{x:4,y:2},{x:6,y:7},{x:4,y:2}]]span * linesPoints也可以是线条的dom对象集合[document.querySelectorAll('polyline/line')];span * tolerance:安全间距span * */span function findCloseLine(linesPoints, tolerance) { var pointArrs = linesPoints; toleranc...
目录: 前端编程 标签: 边框算法, 闭合边框 1条评论 2628次阅读
功能齐全好用的tooltip jquery插件
作者: 秋了秋 发表时间:2017年11月10日
mysql数据库迁移导入到mongodb详细教程
高,设置字体颜色,设置边框颜色,设置字体大小,设置浮动位置,设置事件类型,提示框背景。 代码: (function($){ $.fn.tooltip = function(option){ /* * 提示框jq插件 * Author by 秋叶博客 http://www.mizuiren.com/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 6条评论 15253次阅读
简易无缝滚动功能齐全轮播组件
作者: 秋了秋 发表时间:2017年10月22日
mysql数据库迁移导入到mongodb详细教程
,而且印象中有几篇了。但这篇是更灵活,更通用,使用更傻瓜。使用细节注意看后面的段落。 无论是大图banner的轮播: 还是卡片式轮播,只要是个轮播都可以实现: /* * 轮播图组件 * by:秋叶博客 * 轮播内容直接父级容器ul的class为parts * 前进按钮class为next,后退按钮class为prev * 小点容器ul的class为dot。 * */span 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 initCs...
目录: 前端编程 标签: 轮播特效 10条评论 15729次阅读
智取百度、谷歌分词技术实现智能模糊搜索
作者: 秋了秋 发表时间:2017年08月27日
mysql数据库迁移导入到mongodb详细教程
:汶川大地震,汶川,地震,汶川地震,汶川县,大地震 前端请求:/search?keywords=我爱深圳 分词结果:我爱深圳,我爱深圳我爱深圳,深圳,我爱,深圳市,深圳市爱 前端请求:/search?keywords=秋叶网络博客 分词结果:秋叶网络博客,博客,秋叶,网络,秋叶博客 前端请求:/search?keywords=生活 志趣 爱 分词结果:志趣,生活,爱上,爱,爱生活爱 前端请求:/search?keywords=技术是对生活最完美的诠释 分词结果:对生活最好的诠释,对生活的诠释,完美诠释,生活,是对,生活最完美的诠释,技术,是最好的诠释,生活好,对生活,最完美的诠释,完美,是对生活最好的诠释,为,完美的,...
目录: 前端编程 标签: 分词搜索, 搜索引擎 8条评论 18452次阅读
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条评论 6935次阅读
Html字符串筛选提取指定节点
作者: 秋了秋 发表时间:2017年03月17日
mysql数据库迁移导入到mongodb详细教程
class="xiaoming" id="xiao">小明<i><div class="qiuleqiu">666</div><div class="dream"></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>';pre div #page77 .txt{color:#A4A1A1;}style 提取节点示例: getN...
目录: 前端编程 标签: 字符串提取节点 1条评论 8095次阅读
使用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; } style 您的浏览器不支持canvas,请更换高级版的浏览器! canvas audio div 柱状span 音响span 火焰span 乒乓球span 灯光span div div (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 count script div 第一步span :获取音乐数据。使用API在音乐播放的时候在音源和扬声器中间截断信号并把信号保存下来,再通过代码连接扬声器把声音放出来,这个处理几乎不花时间,所以不用担心造成声音的迟缓。因为计算机的速度快如闪电,不,是闪电不如。strong 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);//得到频谱pre div 通过这段代码,我们就获取到了音乐的音频能量和频谱1024长度的数组,这两个数据分别存在data和playerTimeDomainData里面,所以剩下的都是围绕着两个数值进行操作。 第二步span :绘制动画。这就靠JavaScript编程“艺术”了,动画的实现有传统的Dom操作,也有hml5的Canvas绘图技术,在这里我用canvas,这样会比较流畅,因为频繁操作dom开销是很大的。strong 简单的事情我们绝不说得复杂,复杂的事情那就不要说吧,具体看代码实现~ [showCode]查看代码[/showCode] github地址:https://github.com/mizuiren/Javascript-Animations/blob/master/canvas-music/mp3.htmla 觉得好的话就打个小星星吧~...
目录: 前端编程 标签: h5music 9条评论 7844次阅读
Js、Css3仿手机QQ资料个性名片标签特效
作者: 秋了秋 发表时间:2017年01月20日
mysql数据库迁移导入到mongodb详细教程
0span )span li 可怜(0span )span li 完美主义(0span )span li 霸气外漏(0span )span li 地调(0span )span li ul div div /***************************/ //尊重劳动成果 //版权所有:秋叶 //作者博客地址:http://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 en...
目录: 前端编程 标签: qq资料名片 2条评论 6267次阅读
Javascript中一些吓唬人的怪异写法
作者: 秋了秋 发表时间:2016年10月13日
mysql数据库迁移导入到mongodb详细教程
的怪异写法吧,虽然不一定写得好,也不提倡这么做,我们应提倡简洁且易读性强的代码,就为我们看别人糟糕的代码做好知识储备吧。 1.函数前面加感叹号是几个意思 !function a(){ alert("秋叶") }();pre div 在函数前面加个感叹号表示立即执行的意思,不需要调用函数,相当于(function a(){alert("秋叶")})();除了加感叹号,还有加+,-,~一元操作符号以及void,都是表示立即执行的意思,不过返回值不是正常函数返回的undefined,而是其他。 2.let,const是什么鬼 for(let i=0;i<1000;i++){ let sum=0; const name="秋叶"; sum+=i; }pre div 这是声明变量的方...
目录: 前端编程 标签: javascript 4条评论 7701次阅读