web前端常用小函数汇总

 

2018-08-14 补充：

图片存在则显示，不存在则显示默认图片：

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

在界面嵌入一个url 实现方案：

<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补位

//组装一个三位数
  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));

其他算法摘录：

神奇的递归，每次都能让 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 

输出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-28

console.log((new Date()).toISOString().slice(0,10));//格式化中国标准时间

 

 

2017-05-18

播放器 ：https://github.com/Bilibili/flv.js 哔哩哔哩开源的这个播放器 

 

 

 

2017-04-25

 //分权管理员，不能创建系统管理员，这里过滤掉系统管理员
 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特效系列：

1. jquery 实现文字向上滚动/默认播放音乐/

js——重要笔记

1. js 拼接参数 /加载服务器值/保存提交

 

css——常用整合

1. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
3. 字体图标库

绿————————————色

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

紫————————————移动端的时代

英文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();
}

 删除：

// 删除
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);
                }
            }

        });
    }
}

 请求数据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);
            }
        }
    });
}