web前端經常使用小函數彙總

時間 2019-11-06

標籤 web 前端經常使用函數彙總欄目 HTML 简体版

原文原文鏈接

2018-08-14 補充：javascript

圖片存在則顯示，不存在則顯示默認圖片：css

<img class="po-avt data-avt"  src="${isUrl ? obj.user.avastar : '../../res/image/1.jpg'}">

在界面嵌入一個url 實現方案：html

<iframe id="hmIframe" name="myframe" src="" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>

綁定值：前端

$('#hmIframe').attr('src',url);

$('#hmIframe').attr('src',url);

e.target.id

$(document).on("click", ".show-prompt", function(e) { console.log('點擊後', $(document)); console.log('點擊後id', e.target.id); $.prompt({ title: "獎品", text: "請輸入獎品名稱", onOK: function(text) { //$.alert("您的名字是:"+text, "角色設定成功");
 saveGif(); }, onCancel: function() { console.log("取消了"); }, input: '' }); });

2017-08-01 js補位html5

//組裝一個三位數
  Assemble = (number) =>{ let a = parseInt(number/100) +''; //百位
    let b = parseInt((number%100)/10) +''; //十位
    let c =number%10 +''; //個位
    console.log('百位',a); console.log('十位',b); console.log('個位',c); return(a+b+c); };

 this.Assemble(12);
 console.log("字符串拼接",this.Assemble(12));

其餘算法摘錄：java

神奇的遞歸，每次都能讓 mm 投來讚美和欽慕的眼神~~ 然而，高手過招，講究的是一招致命。上面的代碼竟然用了兩行，簡直是侮辱。琢磨一下，一行神奇的代碼涌上心頭： 代碼以下: /* 奇淫技巧法 */
 function pad3(num, n) { return (Array(n).join(0) + num).slice(-n); } /* 質樸長存法 */
 function pad(num, n) { var len = num.toString().length; while(len < n) { num = "0" + num; len++; } return num; } //這個最簡寫法
 (3/1000).toFixed(3).split('.')[1]

2017-08-01 jquery

輸出A-Z  26個大寫字母

let myList =[]; for(let i=0;i<26;i++){ document.write(String.fromCharCode(65+i));//輸出A-Z 26個大寫字母
      myList.push(String.fromCharCode(65+i)); } console.log(myList);

2017-06-28ios

console.log((new Date()).toISOString().slice(0,10));//格式化中國標準時間

2017-05-18git

播放器：https://github.com/Bilibili/flv.js 嗶哩嗶哩開源的這個播放器

2017-04-25es6

 //分權管理員，不能建立系統管理員，這裏過濾掉系統管理員
 const roleList = Utils.getToArray(this.props.role, roleTYPE.ROLE_LIST).filter(role => (role.description != "系統管理員"));

2017-05-19

'absddd【王小二】djkljdl'.replace(/^\w*\【|\】\w*$/gi,'').replace(/^\w*\【|\】\w*$/gi,'')
//王小二

2017-04-19

es6這個String對象卻是擴展了很多方法，可是不少都是跟字符編碼相關，我的選了幾個感受比較經常使用的方法；


includes 搜索字符的神器

還記得咱們以前如何判斷某個字符串對象是否包含特意字符的嗎？


var str='google';
if(str.indexOf('o')>-1){
   console.log('yes');
}else{
   console.log('no');
}
 
indexOf原本只是一個獲取字符對應位置的方法，由於找到不到會返回-1這個值，就成了判斷是否包含的方法，includes則就是判斷是否包含的直接返回布爾值；

let str='google';
if(str.includes('o')){
   console.log('yes');
}else{
   console.log('no');
}
 這樣更符合語義化，indexOf就是負責獲取位置，includes負責判斷包含關係；

//去掉html標籤
function delHtmlTag(str) { var title = str.replace(/<[^>]+>/g, "");// 去掉全部的html標記
    if (title.length > 300) { title = title.substring(0, 300); } return title; }

onclick="$('#result-page').hide();$('#notice-page').show();"

td 寬度設置生效 :可使用響應式表格，看看是否是你要的樣子。給父元素添加.table-responsive類，這樣寬度不會變，可是會出現橫向滾動條。

td 超出部分隱藏操做：

<td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"><title02</td>

音樂自動播放

var audios = new Audio("audio/gudian.mp3"); audios.play(); // 音樂控制
       function play_music(){ if ($('#mc_play').hasClass('on')){ audios.pause(); $('#mc_play').attr('class','stop'); }else{ audios.play(); $('#mc_play').attr('class','on'); } $('#music_play_filter').hide(); event.stopPropagation(); //阻止冒泡
 } $('#musicControl').click(function(){ play_music(); });

<script type="text/javascript"> window.onload=function () { loadMenu(2,1); } </script>

location.href = "templates/index.html";

圓角： border-radius:15px;


字間距：letter-spacing：4px

/** **初始化倒計時時間 ** */
var timer = null; function startTime() { var m = answerTime - 1; var s = 59; timer = setInterval(function () { if (s < 10) { $('#timeEnd').html(m + ':0' + s); } else { $('#timeEnd').html(m + ':' + s); } s--; if (s < 0) { s = 59; m--; } if (m == 0 && s == 0) { //alert("時間到,請交卷")
 clearInterval(timer); savaData(); } }, 1000) }

寫在開篇：

有前輩們開道，吾輩當自強勉之！天道酬勤，有惑方能有獲！

如何學習javascript？：

豪情博客：http://www.cnblogs.com/jikey/p/3600308.html

前端開發學習資源收集列表：https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide

jqure特效系列：

jquery 實現文字向上滾動/默認播放音樂/

js——重要筆記

js 拼接參數 /加載服務器值/保存提交

css——經常使用整合

綠————————————色

青————————————色

紫————————————移動端的時代

英文api大全：https://platform.html5.org/ 

使用Flexible實現手淘H5頁面的終端適配：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

移動端 h5開發相關內容總結——CSS篇 http://m.blog.csdn.net/article/details?id=50404450

之後寫測試demo用Sublime3

更多炫酷信息和emmet語法請參見：http://docs.emmet.io/cheat-sheet/

- 視頻demo
- 語法文檔

CSS命名規範（規則）

　　經常使用的CSS命名規則

　　頭：header
 　　內容：content/container
 　　尾：footer
 　　導航：nav
 　　側欄：sidebar
 　　欄目：column
 　　頁面外圍控制總體佈局寬度：wrapper
 　　左右中：left right center
 　　登陸條：loginbar
 　　標誌：logo
 　　廣告：banner
 　　頁面主體：main
 　　熱點：hot
 　　新聞：news
 　　下載：download
 　　子導航：subnav
 　　菜單：menu
 　　子菜單：submenu
 　　搜索：search
 　　友情連接：friendlink
 　　頁腳：footer
 　　版權：copyright
 　　滾動：scroll
 　　內容：content
 　　標籤：tags
 　　文章列表：list
 　　提示信息：msg
 　　小技巧：tips
 　　欄目標題：title
 　　加入：joinus
 　　指南：guide
 　　服務：service
 　　註冊：regsiter
 　　狀態：status
 　　投票：vote
 　　合做夥伴：partner

　　註釋的寫法:

　　/* Header */
 　　內容區
 　　/* End Header */

　　id的命名:

　　1)頁面結構

　　容器: container
 　　頁頭：header
 　　內容：content/container
 　　頁面主體：main
 　　頁尾：footer
 　　導航：nav
 　　側欄：sidebar
 　　欄目：column
 　　頁面外圍控制總體佈局寬度：wrapper
 　　左右中：left right center

　　(2)導航

　　導航：nav
 　　主導航：mainnav
 　　子導航：subnav
 　　頂導航：topnav
 　　邊導航：sidebar
 　　左導航：leftsidebar
 　　右導航：rightsidebar
 　　菜單：menu
 　　子菜單：submenu
 　　標題: title
 　　摘要: summary

　　(3)功能

　　標誌：logo
 　　廣告：banner
 　　登錄：login
 　　登陸條：loginbar
 　　註冊：register
 　　搜索：search
 　　功能區：shop
 　　標題：title
 　　加入：joinus
 　　狀態：status
 　　按鈕：btn
 　　滾動：scroll
 　　標籤頁：tab
 　　文章列表：list
 　　提示信息：msg
 　　當前的: current
 　　小技巧：tips
 　　圖標: icon
 　　註釋：note
 　　指南：guild
 　　服務：service
 　　熱點：hot
 　　新聞：news
 　　下載：download
 　　投票：vote
 　　合做夥伴：partner
 　　友情連接：link
 　　版權：copyright

　　注意事項::

　　1.一概小寫;
 　　2.儘可能用英文;
 　　3.不加中槓和下劃線;
 　　4.儘可能不縮寫，除非一看就明白的單詞。

　　CSS樣式表文件命名

　　主要的 master.css
 　　模塊 module.css
 　　基本共用 base.css
 　　佈局、版面 layout.css
 　　主題 themes.css
 　　專欄 columns.css
 　　文字 font.css
 　　表單 forms.css
 　　補丁 mend.css
 　　打印 print.css


如下面的截圖自勉：

var pageNo = 1; $(function(){ loadMsg();//過時
}); function loadMsg(){ var businessSubClass = { pageNo:pageNo, pageSize:10, status:0, targetId:userId } $.ajax({ url:apiUrl+"XXXXX", type: "get", data:businessSubClass, success:function(data, status, xhr){ if(data.status==0){ var list = data.lst; console.log(list); var html = ""; //$("#msgData").html("");
                if(pageNo>=data.nextPage){ $("#divHide").hide(); $("#scrollShow").hide(); $(document.body).destroyInfinite();//銷燬插件
 } for (var i = 0; i < list.length; i++) { var obj=list[i]; html += '<li>'; html += '<div>'+obj.content+' </div>'; html += '<p class="child5">'+obj.showCreateTime+'</p>'; html += '<div></div>'; // html += ' <div style="position: fixed;bottom: 6px;left:30%;padding: 6px 32px;background: #dedede;" onclick="getMoreMsg();">'; // html += ' <span>輕擊加載更多</span>'; // html += ' </div>';
 } $("#msgData").append(html); }else{ alert(data.msg); } } }); } /* * 加載更多數據 模擬分頁操做 * * */
function getMoreMsg(){ pageNo+=1; loadMsg(); }

View Code

刪除：

// 刪除
function del(id) { if (confirm("是否刪除!")) { $.ajax({ url : config.hostIp + "AAA" + "?id=" + id + "&userId="
                    + localStorage.getItem("userId"), headers : { token : localStorage.getItem("token") }, // data:{userId: localStorage.getItem("userId")},
            type : 'delete', success : function(data, status, xhr) { if (data.status == 0) { alert("刪除成功!"); showList(departId); } else { alert(data.msg); } } }); } }

View Code

請求數據ajax

/** **加載對應的試卷套題 ** */
function loadQuestions(){ var businessSubClass = { pageNo:pageNo, pageSize:10, status:0, targetId:userId } $.ajax({ url:apiUrl+"XXXXXXXXX", type: "get", data:businessSubClass, success:function(data, status, xhr){ if(data.status==0){ var list = data.lst; console.log(list); var html = ""; $("#msgData").html(""); for (var i = 0; i < list.length; i++) { var obj=list[i]; html += '<li>'; html += '<div>'+obj.content+' </div>'; html += '<p class="child5">'+obj.showCreateTime+'</p>'; html += '<div></div>'; } $("#msgData").append(html); }else{ alert(data.msg); } } }); }