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); } } }); }

View Code