#1293
展开↯#1294
作者：广西南宁市
我理解的是js改变了DOM的话也是通过渲染的方式进行的, 那么只需要把这个渲染事件加到GUI引擎的事件队列即可, 这样子不也可以实现引擎同步运作而且DOM的变化也渲染了.请问下各位,我哪里理解错了, 谢谢了.
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:23:49
#1295
作者：广西南宁市
《javascript忍者》讲到 定时器最低时间间隔，不能是SetTimeout（fn，4），常见是10
不过楼主讲得很好，不知道是从哪学到的，能说一下吗？
不过楼主讲得很好，不知道是从哪学到的，能说一下吗？
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:23:20
#1296
作者：广西南宁市
其实，对JS引擎的讲解挺好啦，不过，在settimeout 和 set interval 这二个函数如果能做一些对比就更好。同时增加一些优缺点和应用场景就更好了。
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:22:19
#1297
作者：广西南宁市
settimeout却是需要深入理解. HTML的渲染和JS的操作. 前段时间封装Angualrjs指令的时候. 遇到有的问题就是因为没有加settimeout(fn,0). 导致NG里面的link里面的一些操作无法再HTML Dom上起效.
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:22:06
#1298
作者：广西南宁市
js的实际经验，这些东西理解起来真的很吃力。
我还有是有一点点困惑，对于js 的事件队列与执行的队列有什么区别么？只有settimeout(0)可以放到队列尾部，改变实际实行顺序么？
我还有是有一点点困惑，对于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");
};Run code
Cut to clipboard
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:21:51
#1299
作者：广西南宁市
与我给出的calculating 的例子是相同的. dom操作是异步的,el[0].style.backgroundColor = 'red'; 异步操作不会立马执行,而是生成一个事件插入到事件队列的最后面,接着执行for循环,然后到el[0].style.backgroundColor = 'green'; 这句,又插入一个事件到队列里面. 这时队列里面有2个dom渲染的事件挨在一起. 其实它们都是执行了的,只不过速度太快,你只能看到最后的一个渲染结果. 本质问题是代码的执行顺序变了, 是先执行了for , 然后 dom,dom. 解决办法就是让for 也异步插入一个事件到队列尾部. 就变成dom,for,dom. 这样就能实时反馈渲染了.
<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>Run code
Cut to clipboard
文章：setTimeout,前端工程师必定会打交道的一个函数 发表时间：2017-06-13, 11:20:44
#1300
作者：广西南宁市
原生js，获取url ？号 #号后的对应键值对
<!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>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-13, 10:21:38
#1301
作者：广西南宁市
原生js尝试一个循环绑定和dataset方法输出index
<!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>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-13, 10:10:09
#1302
作者：广西南宁市
四种纯css进度条
<!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>Run code
Cut to clipboard
文章：奇妙的 CSS shapes(CSS图形) 发表时间：2017-06-13, 10:08:47
#1303
作者：广西南宁市
<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','
');
$('#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>Run code
Cut to clipboard
<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>Run code
Cut to clipboard
文章：上传base64图片到七牛云存储 发表时间：2017-06-13, 10:06:23
#1304
作者：广西南宁市
不确定高度的内容能相对左邻右舍和父元素垂直居中提供一个思路
<!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>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-13, 10:04:32
#1305
作者：广西南宁市
CRUD是指在做计算处理时的增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)几个单词的首字母简写。主要被用在描述软件系统中数据库或者持久层的基本操作功能。
文章：程序员编程常用网页工具集[游戏] 发表时间：2017-06-13, 09:54:03
#1311
作者：广西南宁市
深入解析JavaScript中函数的Currying柯里化
JS中的柯里化(currying)
问道js题目 编写add函数 然后 add(1)(2)(3)(4) 输出10 再考虑拓展性
一道面试题引发的对javascript类型转换的思考
JS中的柯里化(currying)
问道js题目 编写add函数 然后 add(1)(2)(3)(4) 输出10 再考虑拓展性
一道面试题引发的对javascript类型转换的思考
<script>function curry(fn) {
var slice = [].slice;
var len = fn.length;
return function curried() {
var args = slice.call(arguments);
if (args.length >= len) {
return fn.apply(null, args);
}
return function () {
return curried.apply(null, args.concat(slice.call(arguments)));
};
};
}
var add = curry(function (a, b, c, d) {
return a + b + c + d;
});
console.log(add(1)(2)(3)(4)); // 10
console.log(add(1, 2, 3)(4)); // 10
console.log(add(1)(2, 3)(4)); // 10</script>Run code
Cut to clipboard
文章：奇妙的 CSS shapes(CSS图形) 发表时间：2017-06-12, 17:48:18
照这个结论下去，当你做一次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的最新渲染结果"是两码事~