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 - ;
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.csdn.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
以下面的截图自勉:



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前端常用小函数汇总的更多相关文章

  1. Mysql中常用的函数汇总

    Mysql中常用的函数汇总: 一.数学函数abs(x) 返回x的绝对值bin(x) 返回x的二进制(oct返回八进制,hex返回十六进制)ceiling(x) 返回大于x的最小整数值exp(x) 返回 ...

  2. 学不动了!微信官方推出 Web 前端和小程序统一框架 Kbone

    听说最近微信官方推出了一个统一 Web 前端和小程序的框架 -- Kbone ,特意去看了下... 为什么微信要搞Kbone? 微信小程序的底层模型和 Web 端不同,开发者无法直接把 Web 端的代 ...

  3. WEB前端常用网站收集

    WEB前端常用网站收集整理 w3school.w3schools 前端里.脚本之家.素材家园 17素材.frontopen NEC更好的CSS方案.一些常用的JS实例 Bootstrap  官网  h ...

  4. 整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用

    整理部分JS 控件  WEB前端常用的做成Jsp项目,方便今后直接用 最近又没时间了,等用时间了,再加入更多的, 源码下载: http://download.csdn.net/detail/liang ...

  5. Web前端工程师-优秀简历汇总

    Web前端工程师-优秀简历汇总   1. http://www.linqing07.com/resume.html   2.  http://www.flqin.com/#page2   3.  ht ...

  6. web 前端常用组件【05】ZTree

    web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树等. 历手三四个项目有大有小,采用的树前端都是 Ztree. 有些优秀的J2EE 框架将这些常用的组件都封装起来,作为模块化的组件提供 ...

  7. Web 前端面试小知识

    简历投递 前期为了解自身短板, 可以海投一些试试. 不建议长期海投简历, 对用人单位简历筛选和你自身都没什么好处. 投简历之前最起码要关注以下几点(薪资范围, 公司位置, 职位要求, 是否为培训机构冒 ...

  8. web前端性能测试小点

    关于前端性能的文章: http://www.cnblogs.com/fnng/archive/2011/09/19/2181894.html web应用的前端性能响应时间指浏览器的页面加载时间.浏览器 ...

  9. api日常总结:前端常用js函数和CSS常用技巧

    我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...

随机推荐

  1. 解北大OJ1088滑雪问题的记录

    问题: Time Limit:1000MS   Memory Limit:65536K Total Submissions:67600   Accepted:24862 Description Mic ...

  2. Js面向对象和数据类型内存分配(转)

    一 Js基本数据类型以及内存情况 1 Undefined Undefined类型只有一个值undefined,在使用了声明但未初始化的变量的时候,这个变量值就是undefined 1 var hi; ...

  3. LinkedList类

    LinkedList类 LinkedList类和ArrayList,Vector基本相同,都有增.删.改.查等方法.LinkedList是继承List接口. import java.util.*; p ...

  4. sql,mybatis,javascript分页功能的实现

    用三种不同的方法实现多数据的分页功能.原生sql和mybatis的操作需要每次点击不同页数时都发送http请求,进行一次数据库查询,如果放在前端页面写js语句则不需要每次都请求一次,下面是三种不同的方 ...

  5. foxpro常用命令

    Visual FoxPro原名FoxBase,最初是由美国Fox Software公司于1988年推出的数据库产品,在DOS上运行,与xBase系列兼容.FoxPro是FoxBase的加强版,最高版本 ...

  6. C++ AppendMenu

    主题 1.  系统菜单下面添加自定义菜单 2. 3. 4. 5.         AppendMenu The AppendMenu function appends a new item to th ...

  7. delphi 如何知道 Treeview,Listview 当前最上面显示的节点

    如何知道 Treeview,的节点是根节点       procedure TForm1.TreeView1ContextPopup(Sender: TObject; MousePos: TPoint ...

  8. delphi 保存网页MHT

    delphi 保存网页MHT   uses ADODB_TLB, CDO_TLB, ComObj,MSHTML;{$R *.dfm}{能把网页如 WWW.QQ.COM保存为一个单文件 .MHT但不能把 ...

  9. Winform 水印TextBox

    方法一: public partial class WaterTextBox : TextBox { private readonly Label lblwaterText = new Label() ...

  10. JavaScipt call和apply用法

    转:http://www.cnblogs.com/wupeng/p/3477879.html Javascript call与apply记录 [注]:记录自己对javascript中call与appl ...