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特效系列:
- 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/
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);
}
}
});
}