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]

web前端常用小函数汇总

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

web前端常用小函数汇总

'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 - ;

    var s = ;

    timer = setInterval(function () {

        if (s < ) {

            $('#timeEnd').html(m + ':0' + s);

        } else {

            $('#timeEnd').html(m + ':' + s);

        }

        s--;

        if (s < ) {

            s = ;

            m--;

        }

        if (m ==  && s == ) {

            //alert("时间到,请交卷")

            clearInterval(timer);

            savaData();

        }

    }, )

}

写在开篇：

有前辈们开道，吾辈当自强勉之！天道酬勤，有惑方能有获！

如何学习javascript？：

豪情博客：http://www.cnblogs.com/jikey/p/3600308.html前端开发学习资源收集列表：https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guidejqure特效系列：

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.****.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

以下面的截图自勉：

web前端常用小函数汇总

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

            }

        }

    });

}

秒客网

web前端常用小函数汇总

相关文章