jq 复制文字到剪贴板

今天给大家分享两种实现复制文字到剪贴板的简单方法。一、使用execCommand方法用法:document.execCommand(sCommand[,交互方式, 动态参数])&nbsp;sCommand:为命令参数,如复制copy,打开open,全选selectAll等交互方式:两种可选参数true,false。true为显示对话框,false为不显示对话框。可不写动态参数:一般为可用值或属性值,可不写例如:<span id="daima">11111</span><input type="button" id="Copy" value="点击复制代码" /><script type="text/javascript">&nbsp; &nbsp; $("#Copy").click(function() {&nbsp; &nbsp; &nbsp; &nbsp; var copyText = $("#daima");//获取对象&nbsp; &nbsp; &nbsp; &nbsp; copyText .select();//选择&nbsp; &nbsp; &nbsp; &nbsp; document.execCommand("Copy");//执行复制&nbsp;    alert("复制成功!");&nbsp; &nbsp; })</script>二、clipboard.js插件例如:<p data-clipboard-text="https://www.itao520.cn"&nbsp; class="btn">前世今生</p>下载clipboard.min.js,并在页面中引用<!--&nbsp;clipboard&nbsp;Script&nbsp;-->&nbsp;&nbsp;<script src="dist/clipboard.min.js"></script>在script中实例化语句var clipboard = new Clipboard(&#39;.btn&#39;);clipboard.on(&#39;success&#39;, function(e) {&nbsp; &nbsp; console.log(e.text);&nbsp; //&nbsp;复制的文字&nbsp;});

php中统计中文字符串长度的两种方法

在php里当需要判断一个字符串长度时,我们首先想到的是strlen()函数,strlen()返回的就是字符串的长度,这样使用没有任何问题。但是遇到中文或包含中文的字符串时就会出问题。为此,我分享两种统计中文字符长度的方法。一.mb_strlen(string&nbsp; $str,string [,$encoding = mb_internal_encoding() ])$str 要检查的中文字符串$encoding 参数为字符编码,如果省略,则使用内部字符编码该函数返回 str 字符数的统计,是整型。二.iconv_strlen()$str 要检查的中文字符串$encoding 参数为字符编码,如果省略,则使用内部字符编码该函数返回str字符串的长度。例如:$str = &#39;hello,中国!&#39;;$res1 = iconv_strlen($str,&#39;utf-8&#39;);$res2 = mb_strlen($str,&#39;utf-8&#39;); echo $res1."<br>";echo $res2;返回的$res1,$res2都为9

文字水平垂直居中实现方法

下面给大家介绍一下关于文字水平垂直居中的实现方法。一.利用padding属性居中padding: 50px;二.利用vertical-align属性display:table-cell;vertical-align:middle;利用这个属性前提是把display设置为table-cell三.使用flex弹性布局实现display:flex;justify-content: center;&nbsp;align-items: center;

移动端字体小于12px的解决办法

近期在开发移动端页面时,会遇到字体小于12px无效的情况。针对这一问题我百度了一番,具体的解决思路就是利用transform属性进行缩放字体大小。具体实现如下:font-size:12px;transform:scale(0.9);

循环遍历树形栏目

我们在网站开发时,很多时候都会用到树形栏目。具体怎么实现,我来分享一下吧。实现的思路大致是:采用递归的方式,先查询出所有的顶级栏目,根据顶级栏目id递归循环遍历子栏目,并给它们加上空格或其他符号来显示层次关系。public static function getCate($pid = 0, &$result = [], $blank = -4){ &nbsp; &nbsp;// 1、分类表查询 &nbsp; &nbsp;$res = self::all([&#39;pid&#39;=>$pid]); &nbsp; &nbsp;// 2、自定义分类层次显示关系 &nbsp; &nbsp;$blank += 4; &nbsp; &nbsp;// 3、遍历分类表 &nbsp; &nbsp;foreach ($res as $key => $value){ &nbsp; &nbsp; &nbsp; &nbsp;$cate_name = $value->cate_name; &nbsp; &nbsp; &nbsp; &nbsp;$value->cate_name = str_repeat(&#39;-&#39;,$blank).$cate_name; &nbsp; &nbsp; &nbsp; &nbsp;$result[] = $value; &nbsp; &nbsp; &nbsp; &nbsp;self::getCate($value->id,$result,$blank); &nbsp; &nbsp;} &nbsp; &nbsp;// 4、返回分类数组 &nbsp; &nbsp;return Collection::make($result)->toArray();}

php中explode()函数和implode()函数

explode(string $str1,string $str2)explode函数把字符串打乱成数组参数说明string $str1: 必需。用于打乱的字符串string $str2: 被打乱的字符串例如:$str&nbsp;=&nbsp;"Hello&nbsp;world.&nbsp;I&nbsp;love&nbsp;Shanghai!"; print_r&nbsp;(explode("&nbsp;",$str));implode(string $str,$array)implode函数返回一个由数字元素组合成的字符串参数说明string $str: 可选。规定数组元素之间放置的内容。默认是“”(空字符串)$array : 必需。要组合成字符型的数组。例如:$arr = array(&#39;Hello&#39;,&#39;World!&#39;,&#39;Beautiful&#39;,&#39;Day!&#39;);echo implode(" ",$arr);$arr&nbsp;=&nbsp;array(&#39;Hello&#39;,&#39;World!&#39;,&#39;Beautifaul&#39;,&#39;Day!&#39;); echo&nbsp;implode("",$arr);

php中json_decode()和json_encode()的使用方法

json_decode(string $json ,[bool $assoc ]&nbsp;)&nbsp;对json格式的字符串进行编码参数说明String $json:&nbsp;待解码的 json string 格式的字符串$assoc:&nbsp;当该参数为 TRUE 时,将返回 array 而非 object 。&nbsp;json_decode($data)输出的是对象,而json_decode("$arr",true)是把它强制生成PHP关联数组.&nbsp;json_encode(mixed $value ,[ int $options = 0 ])&nbsp;对变量进行 JSON 编码 (该函数只接受UTF-8编码的数据)参数说明$value :&nbsp;待编码的 value ,除了resource 类型之外,可以为任何数据类型&nbsp;json_decode()和json_encode()是编译和反编译过程,注意json只接受utf-8编码的字符,否则会得到空字符或者null。

php获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法

php获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法php获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法,主要使用到了php的时间函数mktime。下面首先还是直奔主题以示例说明如何使用mktime获取今日、昨日、上周、本月的起始时间戳和结束时间戳,然后在介绍一下mktime函数作用和用法php获取今日开始时间戳和结束时间戳$beginToday=mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;),date(&#39;Y&#39;));$endToday=mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;)+1,date(&#39;Y&#39;))-1;php获取昨日起始时间戳和结束时间戳$beginYesterday=mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;)-1,date(&#39;Y&#39;));$endYesterday=mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;),date(&#39;Y&#39;))-1;php获取上周起始时间戳和结束时间戳$beginLastweek=mktime(0,0,0,date(&#39;m&#39;),date(&#39;d&#39;)-date(&#39;w&#39;)+1-7,date(&#39;Y&#39;));$endLastweek=mktime(23,59,59,date(&#39;m&#39;),date(&#39;d&#39;)-date(&#39;w&#39;)+7-7,date(&#39;Y&#39;));php获取本月起始时间戳和结束时间戳$beginThismonth=mktime(0,0,0,date(&#39;m&#39;),1,date(&#39;Y&#39;));$endThismonth=mktime(23,59,59,date(&#39;m&#39;),date(&#39;t&#39;),date(&#39;Y&#39;));PHP mktime() 函数用于返回一个日期的 Unix 时间戳。语法:mktime(hour,minute,second,month,day,year,is_dst)

单行、多行文本溢出显示省略号(css、js两种方法)

一、css方法1、单行文本p{width:100px;overflow: hidden; &nbsp;/*超出部分隐藏*/white-space: nowrap; &nbsp;/*禁止换行*/text-overflow: ellipsis; /*省略号*/}2、多行文本这个属性只合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器p{&nbsp; &nbsp; width:100px;&nbsp; &nbsp; height:40px;/*需要展示行高度*/&nbsp; &nbsp; display: -webkit-box; /* 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。*/&nbsp; &nbsp; -webkit-box-orient: vertical; /* 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。*/&nbsp; &nbsp; text-overflow: ellipsis; /* 可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。*/&nbsp; &nbsp; -webkit-line-clamp: 2;&nbsp; &nbsp; overflow : hidden;&nbsp;}跨浏览器(浏览器需支持伪元素)p {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; line-height: 1.4em;&nbsp; &nbsp; /* 3 times the line-height to show 3 lines */&nbsp; &nbsp; height: 4.2em;&nbsp; &nbsp; overflow: hidden;}&nbsp;p::after {&nbsp; &nbsp; content: "\02026";/*...*/&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; right: 0;&nbsp; &nbsp; padding: 0 20px 1px 45px;&nbsp; &nbsp; background:-webkit-linear-gradient(left,transparent,#fff 55%);&nbsp; &nbsp; background:-o-linear-gradient(right,transparent,#fff 55%);&nbsp; &nbsp; background:-moz-linear-gradient(right,transparent,#fff 55%);&nbsp; &nbsp; background:linear-gradient(to right,transparent,#fff 55%);&nbsp;}二、js方法function substrLength(elementId,length){&nbsp; //elementId:元素id,length:需保留字符串长度&nbsp; &nbsp; &nbsp; &nbsp; var text=document.getElementById(elementId);&nbsp; &nbsp; &nbsp; &nbsp; var result = "";&nbsp; &nbsp; &nbsp; &nbsp; if(text.innerText.length > length){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result = text.innerText.substr(0,length)+"...";&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result = text.innerText;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; text.innerText=result;&nbsp; &nbsp; }&nbsp; &nbsp; substrLength(&#39;ID&#39;,&#39;length&#39;);

css3中属性前缀(-moz、-ms、-webkit、-o-)

1、-moz-代表firefox浏览器私有属性2、-ms-代表ie浏览器私有属性3、-webkit-代表safari、chrome私有属性4、-o-代表Opera这些是为了兼容老版本的写法,比较新版本的浏览器都支持直接写:border-radius。Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。Firefox、Chrome 以及 Safari 支持所有新的边框属性。对于 border-image:Safari 5 以及更老的版本需要前缀 -webkit-。Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-。

CSS3的WebKit属性给图片添加蒙版

会用PS的童鞋一定知道“蒙版”的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果。大家对-webkit-mask这一属性可能不太熟悉,或许有很多人都是第一次见到,没错,这一属性也是还未被众多浏览器所支持的CSS属性,目前支持这一属性的仅有-webkit-前缀的谷歌及safari浏览器,但是相信在不久的未来这一属性将被其他主流浏览器所支持,下面我们来一睹为快。首先介绍一下它的属性值,可以有两种写法(图片蒙版、渐变蒙版):一、图片蒙版.demo1&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background&nbsp;:&nbsp;url("images/logo.png")&nbsp;no-repeat; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask&nbsp;:&nbsp;url("images/mask.png"); }它的属性值与background的语法基本一样,相关的属性有webkit-mask-clip、 webkit-mask-position 和webkit-mask-repeat等。下面就是其实现的效果图:这里需要注意的是第二张mask.png中黑色部分的透明度(alpha)值为1,将完全显示其下方的图片区域,而其余部分的透明度为0(alpha值),将完全覆盖其下方的图片区域。二、渐变蒙版.demo1&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background&nbsp;:&nbsp;url("images/logo.png")&nbsp;no-repeat; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask&nbsp;:&nbsp;-webkit-gradient(linear,&nbsp;left&nbsp;top,&nbsp;right&nbsp;bottom,&nbsp;from(rgba(0,0,0,1)),&nbsp;to(rgba(0,0,0,0))); }其属性值为CSS渐变老式语法:-webkit-gradient(<type>,&nbsp;<point> [,&nbsp;<radius>]?,&nbsp;<point> [,&nbsp;<radius>]? [,&nbsp;<stop>]*)&nbsp;而新式语法:-webkit-linear-gradient( [效果图如下:&nbsp;三、logo遮罩动态效果利用-webkit-mask我们还可以制作炫酷的logo遮罩动画效果,用js控制让蒙版动起来。效果图如下:实现代码如下:$(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(".mask").mouseover(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;b=0,c=$(this), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d=setInterval(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(b>parseInt(c.width()+50)){clearInterval(d);} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c.css({"-webkit-mask":"-webkit-gradient(radial,&nbsp;88&nbsp;53,"+b+",&nbsp;88&nbsp;53,&nbsp;"+(b+15)+",&nbsp;from(rgba(255,&nbsp;255,&nbsp;255,1)),&nbsp;color-stop(0.5,rgba(255,&nbsp;255,&nbsp;255,&nbsp;0.2)),&nbsp;to(rgba(255,&nbsp;255,&nbsp;255,1)))"}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b++; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); });通过setInterval来对遮罩层渐变位置进行动态变化。我们还可以改变渐变的起点和终点位置来实现不同的效果:-webkit-gradient(radial,&nbsp;0&nbsp;0,"+b+",&nbsp;0&nbsp;0,&nbsp;"+(b+15)+",&nbsp;from(rgba(255,&nbsp;255,&nbsp;255,1)),&nbsp;color-stop(0.5,rgba(255,&nbsp;255,&nbsp;255,&nbsp;0.2)),&nbsp;to(rgba(255,&nbsp;255,&nbsp;255,1)))好了,是不是很炫酷?但是除了webkit的浏览器外其他浏览器不支持哦,如果对浏览器兼容性要求很高的话慎用,但是本着渐进增强的意识,有总比没有好对吧,看不到也无所谓对吧。

保护网站不被仿站复制盗用可以这样做

1.利用仿站工具或类似仿站工具之类原理的爬取工具,批量的抓取页面到本地,适合页面类型多的网站要想杜绝仿站工具及类似工具的爬取就需要在服务器端做好设置,允许正常的用户(浏览器UA)以及正常的搜索引擎蜘蛛(搜索蜘蛛UA,例如百度Baiduspider)访问网站的页面,禁止非法的UA,比如仿站工具前来爬取页面内容,所以只要配置好禁止爬取的UA即可:#以下是nginx的配置细节,添加到server内location&nbsp;/{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($http_user_agent&nbsp;~*&nbsp;"MSIE&nbsp;5.0|msnbot-media|oBot|YandexBot|Mail.RU_Bot|Applebot|SEOkicks-Robot|DotBot|YunGuanCe|Exabot|spiderman|Scrapy|HttpClient|Teleport|TeleportPro|SiteExplorer|WBSearchBot|Elefent|psbot|TurnitinBot|wsAnalyzer|ichiro|ezooms|FeedDemon|Indy&nbsp;Library|Alexa&nbsp;Toolbar|AskTbFXTV|AhrefsBot|CrawlDaddy|CoolpadWebkit|Java|Feedly|UniversalFeedParser|ApacheBench|Microsoft&nbsp;URL&nbsp;Control|Swiftbot|ZmEu|oBot|jaunty|Python-urllib|lightDeckReports&nbsp;Bot|YYSpider|DigExt|HttpClient|MJ12bot|heritrix|EasouSpider|Ezooms|^$")&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;403;&nbsp;&nbsp;&nbsp;&nbsp;}}上面的UA都是被禁止访问的,至于返回码至于是403还是404或者其他非正常的都可以自定义。上面只是判断来访的UA,如果仿站类工具可以非常的逼真的模拟用户浏览器,那么该方法无效了。目前teleport的Pro版本是被禁止抓取的,另外一款叫仿站小工具的也成功阻挡了。至于teleport其他版本是否可以需要实际测试,并将对应合适的UA添加上去。2.纯人工去复制页面,这样的方法适合于页面类型少,页面简单。所以只要在页面上做好相应的防护措施即可://JS代码贴到页面头部,需要jquery$(document).ready(function()&nbsp;{&nbsp;//屏蔽鼠标右键&nbsp;&nbsp;&nbsp;&nbsp;$(document).bind("contextmenu",&nbsp;function(e)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false;&nbsp;&nbsp;&nbsp;&nbsp;});});$(function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;document.addEventListener(&#39;keydown&#39;,&nbsp;function(e)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e&nbsp;=&nbsp;window.event&nbsp;||&nbsp;e;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;keycode&nbsp;=&nbsp;e.keyCode&nbsp;||&nbsp;e.which;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(e.ctrlKey&nbsp;&&&nbsp;keycode&nbsp;==&nbsp;83)&nbsp;{&nbsp;//屏蔽Ctrl+s&nbsp;保存页面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.event.returnValue&nbsp;=&nbsp;false;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(e.ctrlKey&nbsp;&&&nbsp;keycode&nbsp;==&nbsp;85)&nbsp;{&nbsp;<code class="js comments" style="box-sizing: content-box !important; font-size: 1em !important; padding: 0px !important; font-family: Consolas, "Bitstream Vera S

select框默认样式去除

html代码&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;css代码&nbsp;/*清除ie的默认选择框样式清除,隐藏下拉箭头*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; select::-ms-expand { display: none; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.info-select{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 12%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left: 64%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; outline: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*将默认的select选择框样式清除*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; appearance:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-appearance:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-appearance:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -ms-appearance:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/*在选择框的最右侧中间显示小箭头图片*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background: url(../img/arrow.png) no-repeat scroll right center transparent;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}

手机移动端WEB详解

meta基础知识H5页面窗口自动调整到设备宽度,并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略Android平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式viewport模板标题这里开始内容viewport模板 – target-densitydpi=device-dpi,android 2.3.5以下版本不支持标题这里开始内容

0.036913s