你的位置:首页 > 网页设计

[网页设计]前端(移动端)经常用到的一些示例


两个数组合并与最大值最小值的获取

var alldata =[],alldata1=[];alldata1.concat(alldata2); ////示例一:数组追加var array1 = [12 , "foo" , {name:"张三"} , -2458]; var array2 = ["李四" , 555 , 100]; Array.prototype.push.apply(array1, array2); //数组追加

   //示例二 获取最大值,

   

   var numbers = [5, 458, 120, -215];

  var maxInNumbers = Math.max.apply(Math, numbers);   //458

    console.log("maxInNumbers:" + maxInNumbers);

  maxInNumbers = Math.min.call(Math, 5, 458, 1120, -215); //458

     


  

reduce的用法

 

function reduce()    {      var arry = [1, 7, 5, 7, 1, 3];      var sum = arry.reduce(function (pre, cur, index, arr) {        console.log(pre + "______" + cur + "___" + index + "___" + arr);        return pre + cur;      },0);        console.log("和为:"+sum);//输出和为:24    }

 

  

checked文本类容获取和设置值

function chekecked()    {      console.log($("#selxueli").find("option:selected").text());//大学本科毕业      var text = "中等专科毕业";      $("#selxueli option").each(function () {        if ($(this).text() == text) {          $(this).prop("selected", true);        }      })    }Html: <select id="selxueli" >      <option value="8">博士研究生毕业</option>"+      <option value="7">硕士研究生毕业</option>      <option value="6" selected>大学本科毕业</option>      <option value="5">大学专科毕业</option>      <option value="4">研究生班毕业</option>      <option value="3">中等专科毕业</option>      <option value="2">技工学校毕业</option>      <option value="1">普通高中毕业</option>      <option value="0">职业高中毕业</option>    </select>

  

手写数组快速排序 —— 去重

 Array.prototype.uniqus = function () {      var res = [];      var json = {};      for(var i=0;i<this.length;i++)      {        if(!json[this[i]])        {          res.push(this[i]);          json[this[i]] =1;        }      }      return res;    }    var arr = [112, 112, 34, '你好', 112, 112, 34, '你好', 'str', 'str1'];    console.log(arr.uniqus());//[112, 34, "你好", "str", "str1"]

  

圆形进度条

此示例需要引用一个js和一个css 即可

 

 1 <body > 2     <div id="myStat1" data-dimension="205" data-text="" data-info="" data-width="10"  3        data-fontsize="24" data-percent="45" data-fgcolor="#fbd318" data-bgcolor="#e3e3e3"  4        data-fill="#fff6ca" data-type="full" > 5       <span class="circle-text" >66123</span> 6       <span class="circle-info" >ddd</span> 7    <canvas width="205" height="205"></canvas></div> 8    9   <link rel="stylesheet" href="jquery.circliful.css" type="text/css" media="screen" />10   <script type="text/javascript" src="jquery-1.10.2.min.js"></script>11   <script type="text/javascript" src="jquery.circliful.min.js"></script>12    <script type="text/javascript">13 $( document ).ready(function(){14   $('#myStat1').circliful();15 });16   </script>17   18 19 </body>

更简单的箭头代码

 

 

   .box {  padding:20px;  width:100px;  background-color: #fff;  position: relative;  border-radius:10px;}.top {  position: absolute;  top: -20px;  overflow: hidden;  border:10px solid transparent;  border-bottom-color: #fff;}.bottom {  position: absolute;  bottom: -20px;  overflow: hidden;  border:10px solid transparent;  border-top-color: #fff;}.left {  position: absolute;  left: -20px;  overflow: hidden;  border:10px solid transparent;  border-right-color: #fff;}.right {  position: absolute;  right: -20px;  overflow: hidden;  border:10px solid transparent;  border-left-color: #fff;}.box-shadow {  box-shadow: 2px 2px 5px #111;}

  html 代码如下:

 <div >   <br /><br />    <div >      <i ></i>      top    </div>    <br /><br />    <div >      <i ></i>      bottom    </div>    <br /><br />    <div >      <i ></i>      left    </div>    <br /><br />    <div >      <i ></i>      right    </div>  </div>

 二维码生成 

 

  友情说明:

jquery.qrcode.js和qrcode.js两个js 是必须要引用的
 <div >    <h2>拿手机扫一扫</h2>    <div id="qrcodeTable"></div>  </div>  <script src="jquery-1.8.2.js"></script>  <script type="text/javascript" src="jquery.qrcode.js"></script>  <script type="text/javascript" src="qrcode.js"></script>  <script type="text/javascript">$(document).ready(function(){  var wenzi = "姓名:张三\n 性别:男性\n 身份证号:3729261990091811** ";	$("#qrcodeTable").qrcode({		render	: "table",		text: utf16to8(wenzi),		width:"200",		height:"200"	});
//这里是为了转码需要的Js方法,如果是英文或者纯数字等形式,则不需要 function utf16to8(str) { //转码 var out, i, len, c; out = ""; len = str.length; for (i = 0; i < len; i++) { c = str.charCodeAt(i); if ((c >= 0x0001) && (c <= 0x007F)) { out += str.charAt(i); } else if (c > 0x07FF) { out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } else { out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } } return out; }}); </script>


 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"> 6   <title> 手机侧滑事件</title> 7   <script src="http://www.cnblogs.com///cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> 8   <style> 9     *{ padding:0; margin:0; list-style: none;} 10     header{ background: #ffcb20; border-bottom: 1px solid #ccc} 11     header h2{ text-align: center; line-height: 54px; font-size: 16px; color: #fff} 12     .list-ul{ overflow: hidden} 13     .list-li{ line-height: 60px; border-bottom: 1px solid #fcfcfc; position:relative;padding: 0 12px; color: #666; 14       background: #f2f2f2; 15       -webkit-transform: translateX(0px); 16     } 17     .btn{ position: absolute; top: 0; right: -80px; text-align: center; background: #f7483b; color: #fff; width: 80px} 18   </style> 19   <script> 20     window.addEventListener('load', function () { 21       var initX; 22       var moveX; 23       var X = 0; 24       var objX = 0; 25       window.addEventListener('touchstart', function (event) { 26         // event.preventDefault(); 27         28         var obj = event.target.parentNode; 29         if (obj.className == "list-li") { 30           initX = event.targetTouches[0].pageX; 31           objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1; 32         } 33         if (objX == 0) { 34           window.addEventListener('touchmove', function (event) { 35            36             event.preventDefault(); 37             var obj = event.target.parentNode; 38             if (obj.className == "list-li") { 39               moveX = event.targetTouches[0].pageX; 40               X = moveX - initX; 41               //if (X < -50) 42               //{ 43               //这里代码意思为:当滑动当前列,去除其他列的删除按钮 44               //  $(".list-li").css("-webkit-transform", "translateX(0)"); 45               //} 46               if (X > 0) { 47                 obj.style.WebkitTransform = "translateX(" + 0 + "px)"; 48               } 49               else if (X < 0) { 50                 var l = Math.abs(X); 51                 obj.style.WebkitTransform = "translateX(" + -l + "px)"; 52                 if (l > 80) { 53                   l = 80; 54                   obj.style.WebkitTransform = "translateX(" + -l + "px)"; 55                 } 56               } 57             } 58           }); 59         } 60         else if (objX < 0) { 61          62           window.addEventListener('touchmove', function (event) { 63             //这里必须加阻止默认事件,不然,手机端滑动有问题 64             event.preventDefault(); 65             var obj = event.target.parentNode; 66             if (obj.className == "list-li") { 67               moveX = event.targetTouches[0].pageX; 68               X = moveX - initX; 69               if (X > 0) { 70                 var r = -80 + Math.abs(X); 71                 obj.style.WebkitTransform = "translateX(" + r + "px)"; 72                 if (r > 0) { 73                   r = 0; 74                   obj.style.WebkitTransform = "translateX(" + r + "px)"; 75                 } 76               } 77               else {   //向左滑动 78                 obj.style.WebkitTransform = "translateX(" + -80 + "px)"; 79               } 80             } 81           }); 82         } 83  84       }) 85       window.addEventListener('touchend', function (event) { 86         var obj = event.target.parentNode; 87         if (obj.className == "list-li") { 88           objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1; 89           if (objX > -40) { 90             obj.style.WebkitTransform = "translateX(" + 0 + "px)"; 91           } else { 92             obj.style.WebkitTransform = "translateX(" + -80 + "px)"; 93           } 94         } 95       }) 96  97     }); 98     $(function () { 99       $("#btnoutOK").on("click", function () {100         alert("");101       });102       $(".btn").each(function () {103         $(this).on("click", function () {104           alert($(this).attr("id"));105         })106       })107     })108 109   </script>110 111 </head>112 <body>113 <header>114   <h2>消息列表</h2>115 </header>116 <section class="list">117   <ul class="list-ul">118     <li class="list-li">119       <div class="con">120         英国退欧了,是好事还是坏事121       </div>122       <div class="btn" id="1234">删除</div>123     </li>124     <li class="list-li">125       <div class="con">126         哇,朝鲜打算收复欧盟127       </div>128       <div class="btn" id="1235">删除</div>129     </li>130     <li class="list-li">131       <div class="con">132         重大消息,A股将站稳3000点133       </div>134       <div class="btn" id="1235">删除</div>135     </li>136   </ul>137 </section>138 139 </body>140 </html>

 滑动删除:

 

 

好了,星期天休息不容易,写了一个上午,如果你觉得对你有用,请点个赞,谢谢!