<script>
var box=document.getElementById('contentadddd');
function putb64(picurl,pickey,token){
var pic = picurl.substring(22);
/*通过base64编码字符流计算文件流大小函数*/
function fileSize(str){
var fileSize;
if(str.indexOf('=')>0)
{
var indexOf=str.indexOf('=');
str=str.substring(0,indexOf);//把末尾的’=‘号去掉
}
fileSize=parseInt(str.length-(str.length/8)*2);
return fileSize;
}
/*把字符串转换成json*/
function strToJson(str){
var json = eval('(' + str + ')');
return json;
}
var url = "https://upload.qbox.me/putb64/-1";
//"+fileSize(pic)+"/key/"+pickey; //非华东空间需要根据注意事项 1 修改上传域名 "+fileSize(pic)+"/key/"+pickey
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
var data=xhr.responseText;
//console.log(data);
data=strToJson(data);
//console.log(data);
//data=strToJson(data.key);
$('.watermark').hide();
codeanddd('contentadddd','
');
$('#myCanvasimgpuppmain').hide();
submitinputtvllsscccc("上传成功！");
//data=JSON.parse(data);
}
}
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken "+token);
xhr.send(pic);
}
$('body').on('paste','#contentadddd' , function(event){
//alert(event.originalEvent);
//console.log(event.originalEvent);
var e=event.originalEvent;
//box.addEventListener("paste", function(e) {alert(event);
if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.items.length) {
var clipboardData = e.clipboardData,
type = clipboardData.types;
if (type.indexOf('Files') !== -1) {
var item = clipboardData.items[0],
reader = new FileReader();
reader.onload = function(event) {
var img = document.createElement('img');
img.src = event.target.result;
img.onload = function () {
var canvas = document.getElementById("myCanvasimgpupp");
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 55, 55);
}
$('#myCanvasimgpuppmain').show();
$('#submitinputtvllss').text("正在上传..");
//console.log(img.src);
$.ajax( {
url: '/outblog.php?pastimgvassss=base64', //这里是静态页的地址
type: "GET", //静态页用get方法，否则服务器会抛出405错误
dataType: "json",
//cache: false,
//async: false,
beforeSend: function(){
// Handle the beforeSend event
},
success: function(data){
//data=JSON.parse(data);
//alert(file);
var upToken=data.upToken;
var nnaame=data.nnaame;
putb64(img.src,data.cccodejj,upToken)
}
});
//document.body.appendChild(img);
}
if (item.kind === 'string' && clipboardData.items[1]) {
item = clipboardData.items[1];
}
reader.readAsDataURL(item.getAsFile());
}
}
//return false;
})
// box为被拖放的区域
$('body').on('dragover','#contentadddd' , function(event){
var e=event.originalEvent;
//box.addEventListener('dragover', function (e) {
e.preventDefault(); // 必须阻止默认事件
});//, false
$('body').on('drop','#contentadddd' , function(event){
var e=event.originalEvent;
//box.addEventListener('drop', function (e) {
e.preventDefault(); // 阻止默认事件
var file = e.dataTransfer.files[0]; //获取文件
// code
upperCase(file);
$('#myCanvasimgpuppmain').show();
$('#submitinputtvllss').text("正在上传..");
$.ajax( {
url: '/outblog.php', //这里是静态页的地址
type: "GET", //静态页用get方法，否则服务器会抛出405错误
dataType: "json",
//cache: false,
//async: false,
beforeSend: function(){
// Handle the beforeSend event
},
success: function(data){
//data=JSON.parse(data);
//alert(file);
var upToken=data.upToken;
var nnaame=data.nnaame;
var xhr = new XMLHttpRequest,
fd = new FormData;
xhr.open('POST', 'https://up.qbox.me', true); // 'url'
//可以通过progress事件监听上传进度
xhr.onload = function() {
// 上传完成
//alert(nnaame);
$('.watermark').hide();
codeanddd('contentadddd','
#1293
#1294
#1295
#1296
#1297
照这个结论下去，当你做一次dom操作，想获取dom的最新结果就得写个settimeout，那还有法写代码吗？
在一个空内容页面加入下面js,
<script type="text/javascript"> document.body.innerHTML = '渲染好了就出来吧'; while(true){ console.log(document.body.innerHTML); } </script>打开页面,你可以看到控制台一直在打印'渲染好了就出来吧',但是页面仍然是空白,因为"document.body.innerHTML = '渲染好了就出来吧';"这段js已经执行,js引擎已经知道了body里面有东西,但是由于后面一个死循环js一直在跑,所以GUI引擎是没有机会渲染的,所以你说的"做一次dom操作，想获取dom的最新结果"和"做一次dom操作，想看到dom的最新渲染结果"是两码事~
#1298
#1299
不过楼主讲得很好，不知道是从哪学到的，能说一下吗？
#1300
#1301
#1302
我还有是有一点点困惑，对于js 的事件队列与执行的队列有什么区别么？只有settimeout(0)可以放到队列尾部，改变实际实行顺序么？
// 结果Btn1 > Btn all > Btn2 ，预想是Btn all > Btn1 > Btn2 document.querySelector('#status_btns').onclick = function () { document.querySelector('#status_btns1').onclick(); alert("Btn all"); document.querySelector('#status_btns2').onclick(); }; document.querySelector('#status_btns1').onclick = function () { alert("Btn 1"); }; document.querySelector('#status_btns2').onclick = function () { alert("Btn 2"); };#1303
<div style="height:30px"></div><script> var el = document.getElementsByTagName('div'); el[0].style.backgroundColor = 'red'; setTimeout(function(){for (var i=0; i< 2000000; i++) { el[0].style.backgroundColor = 'green'; }},0); </script>#1304
<!DOCTYPE html> <html> <head> <title>获取url？#号后面键值对</title> </head> <body> <script type="text/javascript"> getUrlParam=function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) { return unescape(r[2]) }else{ return null; } } getUrlHash= function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.hash.substr(1).match(reg); if (r != null) { return unescape(r[2]) }else{ return null; } } alert(getUrlParam("mod"));//xx要获取的键名 alert(getUrlHash("xx")); </script> </body> </html>#1305
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>原生js尝试一个循环绑定和dataset方法输出index</title> <style type="text/css"> li { background-color: #ddd; padding: 8px; margin: 18px 0; cursor: pointer; } </style> </head> <body> <ul> <li>第1个li</li> <li>第2个li</li> <li>第3个li</li> <li>第4个li</li> <li>第5个li</li> <li>第6个li</li> <li>第7个li</li> </ul> <script> var cc = document.getElementsByTagName('li'); for(var i = 0; i < cc.length; i++) { cc[i].dataset.user = i; //添加index cc[i].onclick = function(){ //循环绑定click alert("Index: "+this.dataset.user); } } </script> </body> </html>#1306
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Progress</title> <style> *+.tg-progress { margin-top: 15px; } .tg-progress { box-sizing: border-box; height: 20px; margin-bottom: 15px; background: #f7f7f7; overflow: hidden; line-height: 20px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07), inset 0 2px 2px rgba(0, 0, 0, .07); border-radius: 4px; } .tg-progress-bar { width: 0; height: 100%; background: #009dd8; float: left; -webkit-transition: width .6s ease; transition: width .6s ease; font-size: 12px; color: #fff; text-align: center; background-image: -webkit-linear-gradient(top, #00b4f5, #008dc5); background-image: linear-gradient(to bottom, #00b4f5, #008dc5); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(0, 0, 0, .1); text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); } .tg-progress-striped .tg-progress-bar { background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-size: 30px 30px; } .tg-progress-striped.tg-active .tg-progress-bar { -webkit-animation: tg-progress-bar-stripes 2s linear infinite; animation: tg-progress-bar-stripes 2s linear infinite; } @keyframes tg-progress-bar-stripes { 0% { background-position: 0 0; } 100% { background-position: 30px 0; } } .tg-progress-danger .tg-progress-bar { background-color: #d32c46; } </style> </head> <body> <div class="tg-progress"> <div class="tg-progress-bar" style="width: 40%;">40%</div> </div> <div class="tg-progress tg-progress-striped"> <div class="tg-progress-bar" style="width: 65%;"></div> </div> <div class="tg-progress tg-progress-striped tg-active"> <div class="tg-progress-bar" style="width: 85%;"></div> </div> <div class="tg-progress tg-progress-striped tg-active tg-progress-danger"> <div class="tg-progress-bar" style="width: 85%;"></div> </div> </body> </html>#1307
<script> var box=document.getElementById('contentadddd'); function putb64(picurl,pickey,token){ var pic = picurl.substring(22); /*通过base64编码字符流计算文件流大小函数*/ function fileSize(str){ var fileSize; if(str.indexOf('=')>0) { var indexOf=str.indexOf('='); str=str.substring(0,indexOf);//把末尾的’=‘号去掉 } fileSize=parseInt(str.length-(str.length/8)*2); return fileSize; } /*把字符串转换成json*/ function strToJson(str){ var json = eval('(' + str + ')'); return json; } var url = "https://upload.qbox.me/putb64/-1"; //"+fileSize(pic)+"/key/"+pickey; //非华东空间需要根据注意事项 1 修改上传域名 "+fileSize(pic)+"/key/"+pickey var xhr = new XMLHttpRequest(); xhr.onreadystatechange=function(){ if (xhr.readyState==4){ var data=xhr.responseText; //console.log(data); data=strToJson(data); //console.log(data); //data=strToJson(data.key); $('.watermark').hide(); codeanddd('contentadddd','
<script> var box=document.getElementById('contentadddd'); function putb64(picurl,pickey,token){ var pic = picurl.substring(22); /*通过base64编码字符流计算文件流大小函数*/ function fileSize(str){ var fileSize; if(str.indexOf('=')>0) { var indexOf=str.indexOf('='); str=str.substring(0,indexOf);//把末尾的’=‘号去掉 } fileSize=parseInt(str.length-(str.length/8)*2); return fileSize; } /*把字符串转换成json*/ function strToJson(str){ var json = eval('(' + str + ')'); return json; } var url = "https://upload.qbox.me/putb64/-1"; //"+fileSize(pic)+"/key/"+pickey; //非华东空间需要根据注意事项 1 修改上传域名 "+fileSize(pic)+"/key/"+pickey var xhr = new XMLHttpRequest(); xhr.onreadystatechange=function(){ if (xhr.readyState==4){ var data=xhr.responseText; //console.log(data); data=strToJson(data); //console.log(data); //data=strToJson(data.key); $('.watermark').hide(); codeanddd('contentadddd','[imgs]http://out.img.pan.lizhenqiu.com/'+data.key+'[/imgs]'); $('#myCanvasimgpuppmain').hide(); submitinputtvllsscccc("上传成功！"); //data=JSON.parse(data); } } xhr.open('POST', url, true); xhr.setRequestHeader("Content-Type", "application/octet-stream"); xhr.setRequestHeader("Authorization", "UpToken "+token); xhr.send(pic); } $('body').on('paste','#contentadddd' , function(event){ //alert(event.originalEvent); //console.log(event.originalEvent); var e=event.originalEvent; //box.addEventListener("paste", function(e) {alert(event); if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.items.length) { var clipboardData = e.clipboardData, type = clipboardData.types; if (type.indexOf('Files') !== -1) { var item = clipboardData.items[0], reader = new FileReader(); reader.onload = function(event) { var img = document.createElement('img'); img.src = event.target.result; img.onload = function () { var canvas = document.getElementById("myCanvasimgpupp"); var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, 55, 55); } $('#myCanvasimgpuppmain').show(); $('#submitinputtvllss').text("正在上传.."); //console.log(img.src); $.ajax( { url: '/outblog.php?pastimgvassss=base64', //这里是静态页的地址 type: "GET", //静态页用get方法，否则服务器会抛出405错误 dataType: "json", //cache: false, //async: false, beforeSend: function(){ // Handle the beforeSend event }, success: function(data){ //data=JSON.parse(data); //alert(file); var upToken=data.upToken; var nnaame=data.nnaame; putb64(img.src,data.cccodejj,upToken) } }); //document.body.appendChild(img); } if (item.kind === 'string' && clipboardData.items[1]) { item = clipboardData.items[1]; } reader.readAsDataURL(item.getAsFile()); } } //return false; }) // box为被拖放的区域 $('body').on('dragover','#contentadddd' , function(event){ var e=event.originalEvent; //box.addEventListener('dragover', function (e) { e.preventDefault(); // 必须阻止默认事件 });//, false $('body').on('drop','#contentadddd' , function(event){ var e=event.originalEvent; //box.addEventListener('drop', function (e) { e.preventDefault(); // 阻止默认事件 var file = e.dataTransfer.files[0]; //获取文件 // code upperCase(file); $('#myCanvasimgpuppmain').show(); $('#submitinputtvllss').text("正在上传.."); $.ajax( { url: '/outblog.php', //这里是静态页的地址 type: "GET", //静态页用get方法，否则服务器会抛出405错误 dataType: "json", //cache: false, //async: false, beforeSend: function(){ // Handle the beforeSend event }, success: function(data){ //data=JSON.parse(data); //alert(file); var upToken=data.upToken; var nnaame=data.nnaame; var xhr = new XMLHttpRequest, fd = new FormData; xhr.open('POST', 'https://up.qbox.me', true); // 'url' //可以通过progress事件监听上传进度 xhr.onload = function() { // 上传完成 //alert(nnaame); $('.watermark').hide(); codeanddd('contentadddd','[imgs]http://out.img.pan.lizhenqiu.com/'+nnaame+'[/imgs]'); $('#myCanvasimgpuppmain').hide(); submitinputtvllsscccc("上传成功！"); } // fd.append('file', file); // 'file' fd.append('key', nnaame); fd.append('token', upToken); xhr.send(fd); } }); return false; // file为前面获得的 var url = window.URL.createObjectURL(file); var img = new Image; img.src = url; // 加到dom console.log(url); upperCase(file); $('#myCanvasimgpuppmain').show(); });//, false </script>#1308
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>不确定高度的内容能相对左邻右舍和父元素垂直居中提供一个思路</title> <style type="text/css"> .section{ width: 100%; overflow: hidden; font-size: 0; /*这里为0是因为子元素inline-block 之间可能有空格*/ background-color: #eee; } .picture{ width: 33.333%; vertical-align: middle; display: inline-block; /*float 就是block布局 vertical-align不起作用*/ } .picture img{ width: 100%; } .text{ width: 33.333%; vertical-align: middle; /*两个都要加*/ display: inline-block; padding: 0 20px; box-sizing: border-box; background-color: #ccc; } .text h2{ font-size: 20px; line-height: 48px; margin: 0; } .text p{ font-size: 14px; line-height: 22px; margin: 0; /*谷歌的-webkit-margin-after 和 -webkit-margin-before很友（tao）好（yan）呀*/ } </style> </head> <body> <div class="section"> <div class="picture"><img src="http://sucai.epweike.com/uploadfile/2014/0210/thumb_500_332_20140126114608129.jpg" alt="" /></div> <div class="text"> <h2>DIV CLASS=TEXT</h2> <p>这里是一个<strong>字数长度不确定</strong>的段落，到底有多少个字我也不知道，有几行我也不清楚，高度是随意的，但是我依然希望他能相对于图片垂直剧中，随时修改文字都可以。但是高度还是不要大于左右两个图片的高度吧，否则也没意义呀。ps：图片来源于网络</p> </div> <!--左右都有--> <div class="picture"><img src="http://sucai.epweike.com/uploadfile/2014/0210/thumb_500_332_20140126114608129.jpg" alt="" /></div> </div> </body> </html>#1309
#1310
#1311