前端（移动端）经常用到的一些示例

Posted 2020-07-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端（移动端）经常用到的一些示例相关的知识，希望对你有一定的参考价值。

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

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" class="form-control">
            <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 style="background:#eee;padding-bottom:30px;padding-left:20px;">
      <br /><br />
        <div class="box box-shadow">
            <i class="top"></i>
            top
        </div>
        <br /><br />
        <div class="box box-shadow">
            <i class="bottom"></i>
            bottom
        </div>
        <br /><br />
        <div class="box box-shadow">
            <i class="left"></i>
            left
        </div>
        <br /><br />
        <div class="box box-shadow">
            <i class="right"></i>
            right
        </div>
    </div>

　二维码生成　

　　友情说明：

jquery.qrcode.js和qrcode.js两个js 是必须要引用的

  <div class="demo">
        <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="//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>

滑动删除：

技术分享

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