当前位置: 秋叶网络博客
JS全局复制粘贴板的精简兼容实现
作者: 秋了秋 发表时间:2018年10月15日
mysql数据库迁移导入到mongodb详细教程
网页中不存在的文本(纯程序复制)。 6.支持svg文本的复制。 javascript代码: window.copy = { /*JS全局复制粘贴板的精简兼容实现 * by 秋叶博客 //www.mizuiren.com/blog/498.html * textContainer参数可以是选择器名称,也可以是文本 * callback是复制后执行的回调处理,可选,默认会弹出复制成功信息 */ text: function(textContainer, callback) { var copyTextArea = document.querySelectorAll(textContainer); //要拷贝的文...
目录: 前端编程 标签: 复制粘贴 17条评论 4466次阅读
JS给导线描边-非样式属性
作者: 秋了秋 发表时间:2018年07月21日
mysql数据库迁移导入到mongodb详细教程
里用到了一些技术知识点: 1. 三角函数、向量关系,线段关系在javascript中的应用,主要与三角函数为主体; 2. svg的属性和操作,当然描边不局限于svg,在任何场景都可以用,本文只是用svg举例; 原理开始剖析,供学习的人阅读。(如果你只是想把它应用到你的项目中,你可以跳过原理部分,直接到文尾找完整代码 ) 描边首先是基于坐标点来产生一些相对位置的点来勾勒出线条的走向。所以一条线段肯定有它的路径,比如svg中的polyline和p...
目录: 前端编程 标签: JS描边,svg 1条评论 7021次阅读
Javascript给文本段落加上p标签实现换行
作者: 秋了秋 发表时间:2017年08月05日
mysql数据库迁移导入到mongodb详细教程
后给你return一个完美的内容。以下是我把那个php处理函数转成javascript的代码: function autop($pee, $br) { var $pre_tags = {}; var trim = function(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } if ( trim($pee) === '' ){ return ''; } $pee = $pee + "\n"; // just to make things a little easier, pad the end if ($pee.indexOf('<pre') !== -1) { var $pee_parts = $pee.split('</pre>'); var $last_pe...
目录: 前端编程 标签: 内容换行 3条评论 19427次阅读
前端分页页码展示逻辑封装函数
作者: 秋了秋 发表时间:2017年04月21日
mysql数据库迁移导入到mongodb详细教程
6; var preLink = current > 1 ? link + (current-1) : "javascript:void(0)"; var nextLink = current < total ? link + (current+1) : "javascript:void(0)"; var html = '<div class="pages"><b>'+current+'</b>/'+total+' Pages <a href="'+preLink+'" '+(current > 1 ? "":"class=\"no-link\"")+'>«</a>'; if(total <= count){ for(var i=1;i<=total;i++){ var pageTag = i == ...
目录: 前端编程 标签: 分页,前端页码 0条评论 11661次阅读
Js、Css3仿手机QQ资料个性名片标签特效
作者: 秋了秋 发表时间:2017年01月20日
mysql数据库迁移导入到mongodb详细教程
有心的人会注意到手机QQ个人资料卡印象标签页非常精致美观,我看到后心动了,决定心动不如行动,于是用网页高仿出一个web页面,效果基本类似,转念一想,这东西不仅好玩,也可以用作投票页面,以前的选项投票可以换成这种极具交互效果的实现。,哈哈哈,要的直接拿去,注意注明出处,写个页面不容易啊。 #impression{ width:400px; height:600px; position: relative; margin:0 auto; border: 2px solid #C2BABA; } @media screen and (max-width:500px){ #impression{width:95%;} } .impress-bg,.impress-content { position: absolute; left: 0; top: 0; width:100%; height:100%; } .impress-bg{ background: #73b3b3 url("//img.mizuiren.com/datou.jpg") no-repeat; background-size: cover; -webkit-filter: blur(6px); -moz-filter: blur(6px); -o-filter: blur(6px); -ms-filter: blur(6px); filter: blur(6px); } .main-img .center{ position: absolute; left:50%; top:50%; margin-top:-50px; border-radius: 50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); } .main-img img{ width:100px; height:100px; } .main-img .opacity-div{ width:140px; height:140px; background: rgba(255,255,255,0.5); } @keyframes poup1{ 0%{width:140px;height:140px;opacity: 1;} 100%{width:160px;height:160px;opacity: 0;} } @keyframes poup2{ 0%{width:120px;height:120px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @keyframes poup3{ 0%{width:100px;height:100px;opacity: 1;} 100%{width:120px;height:120px;opacity: 0;} } @-webkit-keyframes poup1{ 0%{width:140px;height:140px;opacity: 1;} 100%{width:160px;height:160px;opacity: 0;} } @-webkit-keyframes poup2{ 0%{width:120px;height:120px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-webit-keyframes poup3{ 0%{width:100px;height:100px;opacity: 1;} 100%{width:120px;height:120px;opacity: 0;} } @-ms-keyframes poup1{ 0%{width:140px;height:140px;opacity: 1;} 100%{width:160px;height:160px;opacity: 0;} } @-ms-keyframes poup2{ 0%{width:120px;height:120px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-ms-keyframes poup3{ 0%{width:100px;height:100px;opacity: 1;} 100%{width:120px;height:120px;opacity: 0;} } @-o-keyframes poup1{ 0%{width:140px;height:140px;opacity: 1;} 100%{width:160px;height:160px;opacity: 0;} } @-o-keyframes poup2{ 0%{width:120px;height:120px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-o-keyframes poup3{ 0%{width:100px;height:100px;opacity: 1;} 100%{width:120px;height:120px;opacity: 0;} } @-moz-keyframes poup1{ 0%{width:140px;height:140px;opacity: 1;} 100%{width:160px;height:160px;opacity: 0;} } @-moz-keyframes poup2{ 0%{width:120px;height:120px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-moz-keyframes poup3{ 0%{width:100px;height:100px;opacity: 1;} 100%{width:120px;height:120px;opacity: 0;} } .poup .opacity-div{ animation: poup1 1s ease-out infinite; -webkit-animation: poup1 1s ease-out infinite; -moz-animation: poup1 1s ease-out infinite; -o-animation: poup1 1s ease-out infinite; -ms-animation: poup1 1s ease-out infinite; } .poup .white-div{ animation: poup2 1s ease-out infinite; -webkit-animation: poup2 1s ease-out infinite; -moz-animation: poup2 1s ease-out infinite; -o-animation: poup2 1s ease-out infinite; -ms-animation: poup2 1s ease-out infinite; } .poup .border-div{ animation: poup3 1s ease-out infinite; -webkit-animation: poup3 1s ease-out infinite; -moz-animation: poup3 1s ease-out infinite; -o-animation: poup3 1s ease-out infinite; -ms-animation: poup3 1s ease-out infinite; } @keyframes scan1{ 0%{width:140px;height:140px;} 40%{width:160px;height:160px;} 100%{width:140px;height:140px;} } @keyframes scan2{ 0%{width:120px;height:120px;} 40%{width:140px;height:140px;} 100%{width:120px;height:120px;} } @keyframes scan3{ 0%{width:100px;height:100px;} 40%{width:120px;height:120px;} 100%{width:100px;height:100px;} } @-webit-keyframes scan1{ 0%{width:140px;height:140px;} 40%{width:160px;height:160px;} 100%{width:140px;height:140px;} } @-webkit-keyframes scan2{ 0%{width:120px;height:120px;} 40%{width:140px;height:140px;} 100%{width:120px;height:120px;} } @-webkit-keyframes scan3{ 0%{width:100px;height:100px;} 40%{width:120px;height:120px;} 100%{width:100px;height:100px;} } @-ms-keyframes scan1{ 0%{width:140px;height:140px;} 40%{width:160px;height:160px;} 100%{width:140px;height:140px;} } @-ms-keyframes scan2{ 0%{width:120px;height:120px;} 40%{width:140px;height:140px;} 100%{width:120px;height:120px;} } @-ms-keyframes scan3{ 0%{width:100px;height:100px;} 40%{width:120px;height:120px;} 100%{width:100px;height:100px;} } @-o-keyframes scan1{ 0%{width:140px;height:140px;} 40%{width:160px;height:160px;} 100%{width:140px;height:140px;} } @-o-keyframes scan2{ 0%{width:120px;height:120px;} 40%{width:140px;height:140px;} 100%{width:120px;height:120px;} } @-o-keyframes scan3{ 0%{width:100px;height:100px;} 40%{width:120px;height:120px;} 100%{width:100px;height:100px;} } @-moz-keyframes scan1{ 0%{width:140px;height:140px;} 40%{width:160px;height:160px;} 100%{width:140px;height:140px;} } @-moz-keyframes scan2{ 0%{width:120px;height:120px;} 40%{width:140px;height:140px;} 100%{width:120px;height:120px;} } @-moz-keyframes scan3{ 0%{width:100px;height:100px;} 40%{width:120px;height:120px;} 100%{width:100px;height:100px;} } .scan .opacity-div{ animation: scan1 .5s ease-out; -webkit-animation: scan1 .5s ease-out; -moz-animation: scan1 .5s ease-out; -o-animation: scan1 .5s ease-out; -ms-animation: scan1 .5s ease-out; } .scan .white-div{ animation: scan2 .5s ease-out; -webkit-animation: scan2 .5s ease-out; -moz-animation: scan2 .5s ease-out; -o-animation: scan2 .5s ease-out; -ms-animation: scan2 .5s ease-out; } .scan .border-div{ animation: scan3 .5s ease-out; -webkit-animation: scan3 .5s ease-out; -moz-animation: scan3 .5s ease-out; -o-animation: scan3 .5s ease-out; -ms-animation: scan3 .5s ease-out; } @keyframes opacity1{ 0%{width:140px;height:140px;opacity: .5;} 70%{width:160px;height:160px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-webkit-keyframes opacity1{ 0%{width:140px;height:140px;opacity: .5;} 70%{width:160px;height:160px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-moz-keyframes opacity1{ 0%{width:140px;height:140px;opacity: .5;} 70%{width:160px;height:160px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-o-keyframes opacity1{ 0%{width:140px;height:140px;opacity: .5;} 70%{width:160px;height:160px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-ms-keyframes opacity1{ 0%{width:140px;height:140px;opacity: .5;} 70%{width:160px;height:160px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @keyframes opacity2{ 0%{width:120px;height:120px;opacity: .4;} 50%{width:140px;height:140px;opacity: 1;} 70%{width:120px;height:120px;opacity: 0;} 100%{opacity:0} } @-webkit-keyframes opacity2{ 0%{width:120px;height:120px;opacity: .4;} 50%{width:140px;height:140px;opacity: 1;} 70%{width:120px;height:120px;opacity: 0;} 100%{opacity:0} } @-ms-keyframes opacity2{ 0%{width:120px;height:120px;opacity: .4;} 50%{width:140px;height:140px;opacity: 1;} 70%{width:120px;height:120px;opacity: 0;} 100%{opacity:0} } @-moz-keyframes opacity2{ 0%{width:120px;height:120px;opacity: .4;} 50%{width:140px;height:140px;opacity: 1;} 70%{width:120px;height:120px;opacity: 0;} 100%{opacity:0} } @-o-keyframes opacity2{ 0%{width:120px;height:120px;opacity: .4;} 50%{width:140px;height:140px;opacity: 1;} 70%{width:120px;height:120px;opacity: 0;} 100%{opacity:0} } @keyframes opacity3{ 0%{width:100px;height:100px;opacity: .5;} 40%{width:120px;height:120px;opacity: 1;} 60%{width:100px;height:100px;opacity: 0;} 100%{opacity:0} } @-webkit-keyframes opacity3{ 0%{width:100px;height:100px;opacity: .5;} 40%{width:120px;height:120px;opacity: 1;} 60%{width:100px;height:100px;opacity: 0;} 100%{opacity:0} } @-ms-keyframes opacity3{ 0%{width:100px;height:100px;opacity: .5;} 40%{width:120px;height:120px;opacity: 1;} 60%{width:100px;height:100px;opacity: 0;} 100%{opacity:0} } @-o-keyframes opacity3{ 0%{width:100px;height:100px;opacity: .5;} 40%{width:120px;height:120px;opacity: 1;} 60%{width:100px;height:100px;opacity: 0;} 100%{opacity:0} } @-moz-keyframes opacity3{ 0%{width:100px;height:100px;opacity: .5;} 40%{width:120px;height:120px;opacity: 1;} 60%{width:100px;height:100px;opacity: 0;} 100%{opacity:0} } .main-img.animate .opacity-div{ animation: opacity1 1.2s ease-out infinite; -webkit-animation: opacity1 1.2s ease-out infinite; -moz-animation: opacity1 1.2s ease-out infinite; -o-animation: opacity1 1.2s ease-out infinite; -ms-animation: opacity1 1.2s ease-out infinite; } .main-img.animate .white-div{ animation: opacity2 1.2s ease-out infinite; -webkit-animation: opacity2 1.2s ease-out infinite; -moz-animation: opacity2 1.2s ease-out infinite; -o-animation: opacity2 1.2s ease-out infinite; -ms-animation: opacity2 1.2s ease-out infinite; } .main-img.animate .border-div{ animation: opacity3 1.2s ease-out infinite; -webkit-animation: opacity3 1.2s ease-out infinite; -moz-animation: opacity3 1.2s ease-out infinite; -o-animation: opacity3 1.2s ease-out infinite; -ms-animation: opacity3 1.2s ease-out infinite; } @keyframes small{ 0%{transform: scale(1);} 30%{transform: scale(0);} 100%{transform: scale(1);} } @-webkit-keyframes small{ 0%{-webkit-transform: scale(1);} 30%{-webkit-transform: scale(0);} 100%{-webkit-transform: scale(1);} } @-moz-keyframes small{ 0%{-moz-transform: scale(1);} 30%{-moz-transform: scale(0);} 100%{-moz-transform: scale(1);} } @-ms-keyframes small{ 0%{-ms-transform: scale(1);} 30%{-ms-transform: scale(0);} 100%{-ms-transform: scale(1);} } @-o-keyframes small{ 0%{-o-transform: scale(1);} 30%{-o-transform: scale(0);} 100%{-o-transform: scale(1);} } .impress-tag li.small{ animation: small .3s ease-out; -webkit-animation: small .3s ease-out; -moz-animation: small .3s ease-out; -o-animation: small .3s ease-out; -ms-animation: small .3s ease-out; } .main-img .white-div{ width:120px; height:120px; background: rgba(255,255,255,0.5); } .main-img .border-div{ width:100px; height:100px; background: rgba(255,255,255,0.5); border:1px solid #fff; } .impress-tag li .text{ display:inline-block; width:50px; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } .impress-tag li{ list-style: none; position:absolute; border-radius: 50%; background: rgba(0, 0, 0, 0.3); color:white; box-sizing: border-box; width: 70px; height: 70px; font-size: 14px; font-family: "微软雅黑"; border:1px solid rgb(162,162,162); text-align: center; line-height:1.1em; box-sizing: border-box; padding:0 10px; } 热情(0 ) 大方(0 ) 无私(0 ) 可怜(0 ) 完美主义(0 ) 霸气外漏(0 ) 地调(0 ) /***************************/ //尊重劳动成果 //版权所有:秋叶 //作者博客地址://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 endAngle=para.endAngle; var validAngle=endAngle-beginAngle; var angle=validAngle/count; var X,Y, pointLeft=typeof para.pointElement==="string"?parseInt(para.pointElement.split(",")[0]):(para.pointElement.offsetLeft+para.pointElement.offsetWidth/2), pointTop=typeof para.pointElement==="string"?parseInt(para.pointElement.split(",")[1]):(para.pointElement.offsetTop+para.pointElement.offsetHeight/2); for(var i =0;i [showCode]查看代码[/showCode]...
目录: 前端编程 标签: qq资料名片 2条评论 8061次阅读
Javascript中一些吓唬人的怪异写法
作者: 秋了秋 发表时间:2016年10月13日
mysql数据库迁移导入到mongodb详细教程
javascript作为一门弱类型语言,灵活性非常强大,所以每一个人的编程习惯也不尽相同。从而衍生出各种奇葩的写法,在这里说奇葩,其实就是罕见,比较少人这么写,但却又有人这么写,来盘点一下一些js的怪异写法吧,虽然不一定写得好,也不提倡这么做,我们应提倡简洁且易读性强的代码,就为我们看别人糟糕的代...
目录: 前端编程 标签: javascript 4条评论 9634次阅读
JavaScript数组遍历替代switch case语句
作者: 秋了秋 发表时间:2016年07月08日
mysql数据库迁移导入到mongodb详细教程
": resType="text/html"; break; case ".js": resType="text/javascript"; break; case ".css": resType="text/css"; break; case ".gif": resType="image/gif"; break; case ".jpg": resType="image/jpeg"; break; case ".png": resType="image/png"; break; case ".ico": resType="image/icon"; break; } 如果再多一点,简直就无法阅读了,其它代码都被挤开了,然而我们可以使用数组之间的映射,这种一一对应的关系俗称字典翻译,...
目录: 前端编程 标签: 数组循环 4条评论 9436次阅读
Facebook赞(like)与分享(share)sdk接口使用与回调
作者: 秋了秋 发表时间:2016年03月03日
mysql数据库迁移导入到mongodb详细教程
参考网址:https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.5 分享按钮的实现与回调,限制用户分享且成功后才可继续操作: 分享按钮比较自由一点,图标和事件都可以自己定义,但是方法还是要Facebooksdk提供的方法: FB.ui({ method: 'share', href: 'https://www.facebook.com/mizuiren/', }, function(response){}); 比如说完整的点击事件: document.getElementsByTagName("body")[0].onclick=...
目录: 前端编程 标签: Facebook 7条评论 10303次阅读
滚动到页面底部ajax请求加载填充数据模拟
作者: 秋了秋 发表时间:2016年01月27日
mysql数据库迁移导入到mongodb详细教程
前后端交互往往离不开ajax的身影,这种无刷新加载数据现在运用得越来越广,也为增加用户体验新添了一笔,有了ajax,前端就跟数据打交道了。那么什么才是ajax,ajax的实现方法大家都很耳熟能详(理论),然而实际的数据分析操作却少之又少。 今天花了点时间写了个简洁易懂的ajax数据交互demo供初学者学习参考,代码如下,注释如下。。: (function(){//用闭包自执行形成代码保护,据说这样易于团队维护代码。。 $(window).scroll(function(e){//监控滚动事件 var screenHeight=document.body.clientHeight||document.documentElement.clientHeight;//获取屏幕可视区域高度 var scrollHeight=$(document).scrollTop()+screenHeight;//计算触发ajax事件的页面滚动距离 var ajaxHeight=$('#ajax').offset().top;//到达这个高度的时候ajax开始 if(scrollHeight>=ajaxHeight+20){//判断滚动到目标高度的时候,则.....(ajax开始) /* $.ajax({ url: 'user.php', type: 'GET', dataType: 'html', data: {user_id:"abc",pass:"yes"}, contentType: "application/html; charset=utf-8", timeout: 10000, success: function(data){ arr=data; }, error: function(err){ alert("难道你不懂错误是什么吗?"); } });*/ var arr='{"name":"秋叶","sex":"woman","age":20,"height":"162px"}';//后台请求的数据,暂用一个假数据模拟 var obj=$.parseJSON(arr);//把从后台接收过来的字符串转换为json格式 var li=document.createElement('li');//创建内容元素标签 $(li).append('<span style="color:red">正在加载中。。。。</span>');//先给它填充点默认文字(一般为loading效果) $('#ajaxtxt').append(li);//把这个内容插入到页面中 $('#ajaxtxt').delay(1000).animate({'opacity':'0'},10,function(){//用delay模拟延迟加载,实际项目可忽略 $('#ajaxtxt').css({'opacity':'1'}); $(li).html('<div>他的名字叫<span style="color:red"> '+obj.name+' </span>她已经<span style="color:red"> '+obj.age+' </span>岁了,她不叫小薇!</div>');//把数据填充进来 }) } }) 在线运行查看demo: 以下是程序代码 ajax交互 #ajaxtxt li{line-height:40px;} 1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 1111111111 2222222222 这是底线,这是底线,这是底线,这是底线! (function(){//用闭包自执行形成代码保护,据说这样易于团队维护代码。。 $(window).scroll(function(e){//监控滚动事件 var arr='{"name":"秋叶","sex":"woman","age":20,"height":"162px"}';//后台请求的数据 var obj=$.parseJSON(arr);//把从后台接收过来的字符串转换为json格式 var screenHeight=document.body.clientHeight||document.documentElement.clientHeight;//获取屏幕可视区域高度 var scrollHeight=$(document).scrollTop()+screenHeight;//计算触发ajax事件的页面滚动距离 var ajaxHeight=$('#ajax').offset().top;//到达这个高度的时候ajax开始 if(scrollHeight>=ajaxHeight+20){//判断滚动到目标高度的时候,则.....(ajax开始) var li=document.createElement('li');//创建内容元素标签 $(li).append('正在加载中。。。。 ');//先给它填充点默认文字(一般为loading效果) $('#ajaxtxt').append(li);//把这个内容插入到页面中 $('#ajaxtxt').delay(1000).animate({'opacity':'0'},10,function(){//用delay模拟延迟加载,实际项目可忽略 $('#ajaxtxt').css({'opacity':'1'}); $(li).html('他的名字叫 '+obj.name+' 她已经 '+obj.age+' 岁了,她不叫小薇! ');//把数据填充进来 }) } }) })(); 提示:可以先修改部分代码再运行 ...
目录: 前端编程 标签: 前端交互 0条评论 6630次阅读
JS变量的基本类型和引用类型及内存机制详解
作者: 秋了秋 发表时间:2015年12月19日
mysql数据库迁移导入到mongodb详细教程
javascript中,所有的变量可用基本类型和引用类型区分开来,而运行javascript时是在内存中运行,此时内存会被划分为栈内存和堆内存,栈内存是放基本类型的值,这些值分别存在所分配的物理位置,占据着固定大小的空间(小片段),而堆内存是放引用类型的对象,注意这里并不是值而是对象,是一个指针,这个指针指...
目录: 前端编程 标签: js内存机制 1条评论 8621次阅读

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