web前端常用小函数汇总

时间:2023-03-09 21:21:33
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

web前端常用小函数汇总播放器 :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特效系列:
  1. jquery 实现文字向上滚动/默认播放音乐/

js——重要笔记

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

css——常用整合

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

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

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

英文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/


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