HTML5技术

前端(移动端)经常用到的一些示例 - 你猜猜看

字号+ 作者:H5之家 来源:博客园 2016-06-29 12:00 我要评论( )

两个数组合并与最大值最小值的获取 var alldata =[],alldata1=[];alldata1.concat(alldata2);////示例一:数组追加var array1 = [12 , "foo" , {name:"张三"} , -2458];var array2 = ["李四" , 555 , 100];Array.prototype.push.apply(array1, array2); //数

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

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> <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 即可

 

66123ddd(){ ).circliful(); 15 });

更简单的箭头代码

 

 

.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></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.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • [移动端] IOS下border-image不起作用的解决办法 - 小路_同学

    [移动端] IOS下border-image不起作用的解决办法 - 小路_同学

    2017-05-02 12:04

  • 前端工具的安装 - 韩子卢

    前端工具的安装 - 韩子卢

    2017-05-02 08:00

  • 移动前端常用meta标签 - 0jiji0

    移动前端常用meta标签 - 0jiji0

    2017-04-21 12:00

  • 前端项目从0到1的感悟 - liliangel

    前端项目从0到1的感悟 - liliangel

    2017-04-20 12:00

网友点评
<