html:
<ul class="code_ul"> </ul>
css:
.code_ul>li{ color: #00a28c6c; display: -webkit-flex; height: .4rem; line-height: .4rem; font-weight: 600; font-size: .14rem; align-items: center; } .code_ul>li .button{ flex: 1; width: .6rem; color: #fff; background: #ff6c72; border:none; border-radius: 20px; text-align: center; margin-left:.3rem; }
js:
Here is the addition of dynamic data.
1 if (res.code == 1) { 2 res.data.forEach(function (element, ind) { 3 if (/(iPhone|iOS)/i.test(navigator.userAgent)) { 4 $('.code_ul').empty(); 5 lis += '<li>Exchange code'+ ind + 1 +': & lt; P class ='contents'and'+ element + LT'& lt; / P & gt; & lt; button data - clipboard - tExt= "+ + element +" class= "button copy'+ (ind + 1) +" > replication < /button> < /li> "; 6 $('.code_ul').html(lis); 7 var btns = document.querySelectorAll('.button'); 8 var clipboard = new ClipboardJS(btns); 9 clipboard.on('success', function (e) { 10 easter_egg.popTips('Replication success); 11 }); 12 13 clipboard.on('error', function (e) { 14 console.log(e); 15 }); 16 } else if (/(Android)/i.test(navigator.userAgent)) { //Judge Android 17 var userAgent = navigator.userAgent; 18 var index = userAgent.indexOf("Android") 19 if (index >= 0) { 20 var androidVersion = parseFloat(userAgent.slice(index + 8)); 21 if (androidVersion < 6) { 22 $('.code_ul').empty(); 23 lis += '<li>Exchange code'ind + 1 + lt: & lt; textarea class ='text'gt;'element + lt' & lt; / textarea & gt; & lt; / Li & gt; '; 24 $('.code_ul').html(lis); 25 } else { 26 $('.code_ul').empty(); 27 lis += '<li>Exchange code'+ ind + 1 +': & lt; P class ='contents'and'+ element + LT'& lt; / P & gt; & lt; button data - clipboard - tExt= "+ + element +" class= "button copy'+ (ind + 1) +" > replication < /button> < /li> "; 28 $('.code_ul').html(lis); 29 var btns = document.querySelectorAll('.button'); 30 var clipboard = new ClipboardJS(btns); 31 clipboard.on('success', function (e) { 32 easter_egg.popTips('Replication success); 33 }); 34 35 clipboard.on('error', function (e) { 36 console.log(e); 37 }); 38 39 } 40 } 41 } 42 43 44 }); 45 } else { 46 easter_egg.popTips(res.message); 47 return; 48 }
The clipboard.min.js plug-in is used. Android below 5 does not support, so it has not been solved.