1.一个页面中的多个复制内容到剪切板
引入clipboard.min.js
可直接从官网下载:http://www.clipboardjs.cn/
当有多个需要复制,需要先判断目标的当前环境
html
<div class="loop-list">
<p class="copyVal">今天天气真好</p>
<div class="share">
<p class="copy">点击复制</p>
</div>
</div>
<div class="loop-list">
<p class="copyVal">我草你家真大</p>
<div class="share">
<p class="copy">点击复制</p>
</div>
</div>
js
var content = "请复制!";
$(".share").hover(function(){ //这里我设置了鼠标移入父元素,动态改变content内容
var parentChild = $(this).parents(".loop-list");
content = parentChild.find(".copyVal").text(); //通过该元素的祖先元素,找到不同级的.copyVal(要复制的内容)
})
//下面就是官方给的模板
var clipboard = new ClipboardJS('.copy', {
text: function () {
return content;
}
});
clipboard.on('success', function (e) {
alert("复制成功");
});
clipboard.on('error', function (e) {
console.log(e);
});
这样点击不同的.copy就会复制其相对应需要复制的内容,我这里用到了jQuery选择器,使用时别忘了引入jquery
2.通过不同链接动态生成多个二维码
引入
jquery.js
jquery.qrcode.min.js
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
html
<div class="qrcode" data-url=“www.xxx.com”></div>
<div class="qrcode" data-url=“www.bbb.com”></div>
<div class="qrcode" data-url=“www.ccc.com”></div>
js
$('.qrcode').each(function(){
var url = $(this).attr('data-url'); //循环数据的时候给每个元素加上不同的data-url
jQuery(this).qrcode({width:100,height:100,correctLevel:0,render: "canvas",text: url});
//render有两个选项,canvas和table,如果你的二维码太小,不要用table
});
3.页面简单的中英文切换 translater.min.js使用心得
页面的中英文切换,除了最简单的两张页面,和网上的整站翻译,最后发现translater.min.js
用法极为简单,只要在每段文字下面加上中英文的注释,当然这会比较繁琐,不适用分段文字过多的项目。
首先,引入translater.min.js
官网:https://wangchujiang.com/translater.js/
<script src="translater.min.js"></script>
html
<a class="chinese" href="javascript:void(0);">
中文
<!--{cn}中文-->
<!--{en}Chinese-->
</a>
<a class="english" href="javascript:void(0);">
英文<!--{cn}英文-->
<!--{en}English-->
</a>
<p>
你好
<!--{cn}你好-->
<!--{en}Hellow-->
</p>
js
var t = localStorage.getItem("language")
//取缓存保存的网站语言,页面刷新或跳转也不影响已切换的语言
if(t=="cn"){
var tran;
tran = new Translater();
if (tran.getLang() === "default") tran.setLang('cn');
var tran = new Translater({
lang: "cn"
});
}else{
var tran;
tran = new Translater();
if (tran.getLang() === "default") tran.setLang('en');
var tran = new Translater({
lang: "en"
});
}
$(".chinese").click(function () {
//点击中文,全部显示注释内的中文,并将中文语言进行缓存
var tran;
tran = new Translater();
if (tran.getLang() === "default") tran.setLang('cn');
var tran = new Translater({
lang: "cn"
});
localStorage.setItem("language", "cn");
})
$(".english").click(function () {
//点击英文,全部显示注释内的英文,并将英文语言进行缓存
var tran;
tran = new Translater();
if (tran.getLang() === "default") tran.setLang('en');
var tran = new Translater({
lang: "en"
});
localStorage.setItem("language", "en");
})
多种语言都可以使用,同理不适用于大型页面。我这里用到了jQuery选择器,使用时别忘了引入jquery