使用原生JS修改css属性
修改style样式：
1. 通过document.styleSheets[n] // n表示期望修改的样式表序号，从0开始计数来获取到期望修改的样式表，通过cssRules[0]获取到该样式表的css内容，通过style修改特定样式；
2. 修改特定元素节点的style内容cssText可以一次性修改多个css属性style.attrName 修改单个属性 attrName的值
3. 通过setAttribute 修改style属性值
<style>
.test {font-size: 30px;color: blue;background-color: blueviolet}
</style>
// html
<div class="test" style="height: 100px;">TEST</div>
<button class="cssText">cssText</button>
<button class="setAttribute">setAttribute</button>
<button class="stylesheet ">stylesheet </button>
// js
var testNode = document.getElementsByClassName("test")[0];
var cssTextBtn = document.getElementsByClassName("cssText")[0];
var attributeBtn = document.getElementsByClassName("setAttribute")[0];
var stylesheetBtn = document.getElementsByClassName("stylesheet")[0];
// 1. 修改style样式:
stylesheetBtn.addEventListener('click', function(e) {
var stylesheet = document.styleSheets[0];
stylesheet.cssRules[0].style.backgroundColor = "green";
}, false);
// 2. 修改特定元素节点的style内容
cssTextBtn.addEventListener('click', function(e) {
testNode.style.cssText = "width: 300px; background-color: red; height: 200px;"
testNode.style.border = "1px solid black"
}, true);
// 3. 通过setAttribute 修改style属性值
attributeBtn.addEventListener('click', function(e) {
testNode.setAttribute('style', 'width: 400px; background-color: yellow; height: 300px;')
}, false);
ajax上传-基于html5 FormData的批量文件上传
参考：https://www.cnblogs.com/imwtr/p/5924042.html
转自：https://blog.csdn.net/sinat_34492035/article/details/80477858
不使用FormData，直接用 <input type="file" name="file" multiple> 也可以实现批量上传。本例是ajax方式多个文件同时上传，也可以基于FormData采用ajax循环上传多个文件。更多功能可通过理解下面的原理自行扩展。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
ul{
list-style:none;
}
ul{
width:700px;
border:2px solid red;
padding:10px;
}
.clearfix:after{
display: block;
content:'';
overflow: hidden;
visibility: hidden;
clear: both;
height:0;
}
.content ul li{
float:left;
width:100px;
height:100px;
margin:0 10px;
border:1px solid #ccc;
}
.addFile{
background:url("../img/icon12.png") no-repeat;
background-position: center center;
}
#attach{
width:100%;
height:100%;
opacity:0;
}
</style>
</head>
<body>
<form action="formData_test.php" id="form">
<div class="content">
<ul class="clearfix ul-box">
<li class="addFile">
<input type="file" id="attach" multiple require />
</li>
</ul>
</div>
<input type="text" name="name"/>
<input type="text" name="age"/>
<input type="text" name="sex"/>
<input type="button" value="上传" class="subBtn"/>
</form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
//定义一个数组 把文件数组的值给新数组 对新数组进行操作 然后把新数组传递给后台
var curFiles = [];
$("#attach").change(function(){
var fileArr = $(this)[0].files;
Array.prototype.push.apply(curFiles, fileArr);
// var fileArr = this.files;
console.log(fileArr);
//这里展示的话 还是用fileArr
for(var i=0;i<fileArr.length;i++){
console.log(fileArr[i]);
var item = fileArr[i];
var abc=$("<li class='showf'><p style='overflow:hidden;text-overflow:ellipsis; '>文件名:"+item.name+"</p>"+
"<p>大小："+(item.size/1024).toFixed(2)+"KB</p></li>");
$(".ul-box").prepend(abc);
}
// fileArr.map(function(item,index,arr){
// var abc=$("<li><p>文件名:"+item.name+"</p>"+
// "<p>大小："+parseInt(item.size/1024)+"KB</p></li>");
// $(".ul-box").prepend(abc);
// })
})
$(".ul-box").on("click",".showf",function(){
var index = $(".showf").index($(this));
alert(index);
var name = $(this).find("p").eq(0).html();
console.log(curFiles);
// curFiles = curFiles.filter(function(file) {
// return file.name != name;
// });
curFiles.splice(index,1)
console.log(curFiles);
$(this).remove();
})
$(".subBtn").click(function(){
// 构建FormData对象
var fd = new FormData($('#form')[0]);
for (var i = 0, j = curFiles.length; i < j; ++i) {
fd.append('attach[]', curFiles[i]);
}
for(var pair of fd.entries()) {
console.log(pair[0]+ ', '+ pair[1]);
}
$.ajax({
url: 'formData_test.php',
type: 'post',
data: fd,
processData: false,
contentType: false,
success: function(rs) {
console.log(rs);
},
error: function(err) {
}
});
})
</script>
</html>
formData_test.php源码：
<?php $files = $_FILES['attach']; var_dump($files); ?>
上传前图片预览
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="file">
<script>
$('input[type=file]').change(function(){
var file=this.files[0];
var reader=new FileReader();
reader.onload=function(){
// 通过 reader.result 来访问生成的 DataURL
var url=reader.result;
setImageURL(url);
};
reader.readAsDataURL(file);
});
var image=new Image();
function setImageURL(url){
image.src=url;
}
$(image).appendTo($('body'));
</script>
vue学习路线
新手：Vue 2.0 的建议学习顺序 https://zhuanlan.zhihu.com/p/23134551
Vue技术内幕 http://hcysun.me/vue-design/
Vue.js技术揭秘 https://ustbhuangyi.github.io/vue-analysis/
Vue 3.0 动态核心概述 https://msd.misuland.com/pd/3255817963235705746
电子相册
电子书、电子杂志参考 官网 https://www.fliphtml5.com/ 云展网企业宣传册制作：https://www.yunzhan365.com/ https://book.yunzhan365.com/pteyi/dckd/mobile/index.html https://book.yunzhan365.com/rvdk/vggc/mobile/index.html
photoswipe兼容手机版，支持拖动、缩放
https://github.com/dimsemenov/photoswipe
fancybox 不支持拖动、缩放
使用jquery.qrcode.js生成二维码-支持中英文混合输入
官网：https://larsjung.de/jquery-qrcode/
github：https://github.com/lrsjng/jquery-qrcode
演示：https://larsjung.de/jquery-qrcode/latest/demo/
<div id="qrcodeTable"></div>
<img id="logoimg" src="logo.png">
<script>
$('#qrcodeTable').qrcode({
// render method: 'canvas', 'image' or 'div'
render: 'image',
// version range somewhere in 1 .. 40
minVersion: 1,
maxVersion: 40,
// error correction level: 'L', 'M', 'Q' or 'H'
ecLevel: 'L',
// offset in pixel if drawn onto existing canvas
left: 0,
top: 0,
// size in pixel
size: 200, //二维码尺寸
// code color or image element
fill: '#000', //二维码颜色
// background color or image element, null for transparent background
background: '#fff', //背景色
// content
text: '汉a字',
// corner radius relative to module width: 0.0 .. 0.5
radius: 0,
// quiet zone in modules
quiet: 2, //可理解为css的padding，大小为quiet*6像素
// modes
// 0: normal 无文字、无logo
// 1: label strip
// 2: label box 显示文字
// 3: image strip
// 4: image box 显示logo
mode: 4,
mSize: 0.1, //logo尺寸
mPosX: 0.5, //logo位置
mPosY: 0.5,
label: 'hello', //使用文字代替logo
fontname: 'sans',
fontcolor: '#000',
image: null, //$('#logoimg')[0]
});
</script>
<script>
$('#qrcodeTable').qrcode({
render: 'image', //canvas|image|div
size: 200, //二维码尺寸
text: '汉a字',
quiet: 2, //可理解为css的padding，大小为quiet*6像素
});
</script>
encodeURI、encodeURIComponent、escape
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
<script>
var s = encodeURI('http://www.baidu.com/s?wd=你好');
document.write(s+'<br>'); //http://www.baidu.com/s?wd=%E4%BD%A0%E5%A5%BD
s = 'http://www.baidu.com/s?wd='+encodeURI('你好');
document.write(s+'<br>'); //http://www.baidu.com/s?wd=%E4%BD%A0%E5%A5%BD
document.write(decodeURI('http://www.baidu.com/s?wd=%E4%BD%A0%E5%A5%BD')); //http://www.baidu.com/s?wd=你好
</script>
在使用url进行参数传递时，经常会传递一些中文名的参数或URL地址，在后台处理时会发生转换错误。在有些传递页面使用GB2312，而在接收页面使用UTF8，这样接收到的参数就可能会与原来发生不一致。使用服务器端的urlEncode函数编码的URL，与使用客户端javascript的encodeURI函数编码的URL，结果就不一样。
javaScript中的编码方法：
escape() 方法：采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。unescape方法与此相反。不会被此方法编码的字符： @ * / +
encodeURI() 方法：
把URI字符串采用UTF-8编码格式转化成escape格式的字符串。不会被此方法编码的字符：! @ # $& * ( ) = : / ; ? + '
encodeURIComponent() 方法：
把URI字符串采用UTF-8编码格式转化成escape格式的字符串。与encodeURI()相比，这个方法将对更多的字符进行编码，比如 / 等字符。所以如果字符串里面包含了URI的几个部分的话，不能用这个方法来进行编码，否则 / 字符被编码之后URL将显示错误。不会被此方法编码的字符：! * ( )
因此，对于中文字符串来说，如果不希望把字符串编码格式转化成UTF-8格式的（比如原页面和目标页面的charset是一致的时候），只需要使用escape。如果你的页面是GB2312或者其他的编码，而接受参数的页面是UTF-8编码的，就要采用encodeURI或者encodeURIComponent。
另外，encodeURI/encodeURIComponent是在javascript1.5之后引进的，escape则在javascript1.0版本就有。
decodeURIComponent -- 解码encodeURIComponent函数编码的字符串
iscroll仿系统滚动插件
http://caibaojian.com/iscroll-5/
https://segmentfault.com/a/1190000003113280
https://blog.csdn.net/amyloverice/article/details/79383712
http://www.jq22.com/jquery-info13446
CDN https://www.bootcdn.cn/iScroll/
最简单的js日历
<meta charset="utf-8">
<div id="calendar"></div>
<script>
/**
* edgesun@126.com
* 20190207
*/
function myCalendar(YEAR,MONTH){
function isLng(num){return /^(0|([1-9]\d*))$/.test(''+num);}
var myDate=new Date(), today={year:myDate.getFullYear(), month:myDate.getMonth(), date:myDate.getDate(), ymd:''}; //当前日期
today.ymd = today.year+ (today.month<9?'0':'')+(today.month+1)+(today.date<10?'0':'')+today.date;
if(isLng(YEAR) && isLng(MONTH)){
if(YEAR<2010 || YEAR>2037){alert('不能再翻啦~');return;}
if(MONTH>11){alert('参数month应该为0到11的整数');return;}
myDate.setFullYear(YEAR, MONTH, 1);
}else{
YEAR = today.year;
MONTH = today.month;
}
var PrevNext=[[0,0],[0,0]]; //依次为上一月的年、月，下一月的年、月
if(MONTH==0){
PrevNext = [[YEAR-1,11],[YEAR,1]];
}else if(MONTH==11){
PrevNext = [[YEAR,10],[YEAR+1,0]];
}else{
PrevNext = [[YEAR,MONTH-1],[YEAR,MONTH+1]];
}
myDate.setDate(1); //当前显示月的第一天
var weekday=myDate.getDay()?myDate.getDay():7; //当前显示月的第一天是星期几(星期天重置为7，即每周最后一天)
myDate.setMonth(MONTH+1);
myDate.setDate(0);
var totalDays = myDate.getDate(); //当前显示月的总天数
var html='<table width="100%" border="1" cellpadding="5" cellspacing="0"><thead><tr><th onclick="myCalendar('+PrevNext[0][0]+','+PrevNext[0][1]+')">上个月</th><th colspan="5">'+YEAR+'年'+(MONTH+1)+'月</th><th onClick="myCalendar('+PrevNext[1][0]+','+PrevNext[1][1]+')">下个月</th></tr><tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr></th><tbody>';
var n=0, ymd='';
for(var i=1; i<=42; ++i){
if(i%7==1) html+='<tr>';
if(i>=weekday && i<totalDays+weekday){
++n;
ymd=''+YEAR+(MONTH<9?'0':'')+(MONTH+1)+(n<10?'0':'')+n;
html+='<td'+(ymd==today.ymd?' style="background-color:#ddf;"':'')+' data-date="'+ymd+'">'+n+'</td>';
}else{
html+='<td></td>';
}
if(i%7==0){
html+='</tr>';
if(i>=(totalDays+weekday-1))break;
}
}
html+='</tbody></table>';
document.getElementById('calendar').innerHTML=html;
}
myCalendar();
</script>
一个不错的js颜色选择器
https://github.com/claviska/jquery-minicolors
演示： http://www.jq22.com/jquery-info204
更多js拾色器：http://www.jq22.com/jquery-plugins%E6%8B%BE%E8%89%B2%E5%99%A8-1-jq
如果同步设置input背景色，可能会出现input内text颜色与背景色难以区分的情况，可以使用如下方法自动设置文字颜色：（hex为获取到的颜色，如：#ffcc00）
var r = parseInt(hex.substr(1, 2), 16);
var g = parseInt(hex.substr(3, 2), 16);
var b = parseInt(hex.substr(5, 2), 16);
var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
$(this).css({'background-color':hex, 'color': (yiq >= 128) ? 'black' : 'white'});
配置：
$('.js-color-input').each( function() {
$(this).minicolors({
control: $(this).attr('data-control') || 'hue',
defaultValue: $(this).attr('data-defaultValue') || '#ff0000',
format: $(this).attr('data-format') || 'hex',
keywords: $(this).attr('data-keywords') || '',
inline: $(this).attr('data-inline') === 'true',
letterCase: $(this).attr('data-letterCase') || 'lowercase',
opacity: $(this).attr('data-opacity'),
position: $(this).attr('data-position') || 'bottom',
swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
change: function(hex, opacity){
if(! hex)return;
var r = parseInt(hex.substr(1, 2), 16);
var g = parseInt(hex.substr(3, 2), 16);
var b = parseInt(hex.substr(5, 2), 16);
var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
$(this).css({'background-color':hex, 'color': (yiq >= 128) ? 'black' : 'white'});
},
theme: 'default',
});
});
