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
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特效系列:
- 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/
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前端常用小函数汇总的更多相关文章
- Mysql中常用的函数汇总
Mysql中常用的函数汇总: 一.数学函数abs(x) 返回x的绝对值bin(x) 返回x的二进制(oct返回八进制,hex返回十六进制)ceiling(x) 返回大于x的最小整数值exp(x) 返回 ...
- 学不动了!微信官方推出 Web 前端和小程序统一框架 Kbone
听说最近微信官方推出了一个统一 Web 前端和小程序的框架 -- Kbone ,特意去看了下... 为什么微信要搞Kbone? 微信小程序的底层模型和 Web 端不同,开发者无法直接把 Web 端的代 ...
- WEB前端常用网站收集
WEB前端常用网站收集整理 w3school.w3schools 前端里.脚本之家.素材家园 17素材.frontopen NEC更好的CSS方案.一些常用的JS实例 Bootstrap 官网 h ...
- 整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用
整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用 最近又没时间了,等用时间了,再加入更多的, 源码下载: http://download.csdn.net/detail/liang ...
- Web前端工程师-优秀简历汇总
Web前端工程师-优秀简历汇总 1. http://www.linqing07.com/resume.html 2. http://www.flqin.com/#page2 3. ht ...
- web 前端常用组件【05】ZTree
web 项目或多或少都会有涉及到什么人员职称树,菜单树,组织机构树等. 历手三四个项目有大有小,采用的树前端都是 Ztree. 有些优秀的J2EE 框架将这些常用的组件都封装起来,作为模块化的组件提供 ...
- Web 前端面试小知识
简历投递 前期为了解自身短板, 可以海投一些试试. 不建议长期海投简历, 对用人单位简历筛选和你自身都没什么好处. 投简历之前最起码要关注以下几点(薪资范围, 公司位置, 职位要求, 是否为培训机构冒 ...
- web前端性能测试小点
关于前端性能的文章: http://www.cnblogs.com/fnng/archive/2011/09/19/2181894.html web应用的前端性能响应时间指浏览器的页面加载时间.浏览器 ...
- api日常总结:前端常用js函数和CSS常用技巧
我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...
随机推荐
- 解北大OJ1088滑雪问题的记录
问题: Time Limit:1000MS Memory Limit:65536K Total Submissions:67600 Accepted:24862 Description Mic ...
- Js面向对象和数据类型内存分配(转)
一 Js基本数据类型以及内存情况 1 Undefined Undefined类型只有一个值undefined,在使用了声明但未初始化的变量的时候,这个变量值就是undefined 1 var hi; ...
- LinkedList类
LinkedList类 LinkedList类和ArrayList,Vector基本相同,都有增.删.改.查等方法.LinkedList是继承List接口. import java.util.*; p ...
- sql,mybatis,javascript分页功能的实现
用三种不同的方法实现多数据的分页功能.原生sql和mybatis的操作需要每次点击不同页数时都发送http请求,进行一次数据库查询,如果放在前端页面写js语句则不需要每次都请求一次,下面是三种不同的方 ...
- foxpro常用命令
Visual FoxPro原名FoxBase,最初是由美国Fox Software公司于1988年推出的数据库产品,在DOS上运行,与xBase系列兼容.FoxPro是FoxBase的加强版,最高版本 ...
- C++ AppendMenu
主题 1. 系统菜单下面添加自定义菜单 2. 3. 4. 5. AppendMenu The AppendMenu function appends a new item to th ...
- delphi 如何知道 Treeview,Listview 当前最上面显示的节点
如何知道 Treeview,的节点是根节点 procedure TForm1.TreeView1ContextPopup(Sender: TObject; MousePos: TPoint ...
- delphi 保存网页MHT
delphi 保存网页MHT uses ADODB_TLB, CDO_TLB, ComObj,MSHTML;{$R *.dfm}{能把网页如 WWW.QQ.COM保存为一个单文件 .MHT但不能把 ...
- Winform 水印TextBox
方法一: public partial class WaterTextBox : TextBox { private readonly Label lblwaterText = new Label() ...
- JavaScipt call和apply用法
转:http://www.cnblogs.com/wupeng/p/3477879.html Javascript call与apply记录 [注]:记录自己对javascript中call与appl ...