弱类型与函数作用域背后隐藏的究竟是什么?
settimeout作用的函数为何不能传参?
js修改的CSS是不是拥有最高优先级?
browser端js跟node.js又有何差异?
本来今天高高兴兴,想把前些日子在CSS揭秘里看到的打字特效封装下然后…
先上代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
background-color: #1b1b1b;
color: #91f72e;
}
@keyframes typing {/*这部分回头也要集成到js里边去*/
from { width: 0 }
}
@keyframes caret {/*这部分回头也要集成到js里边去,由js统一设置*/
50% { border-right-color: transparent; }
}
</style>
<body>
<div id="text">
<!--只要设置父级div的id,然后里边都用p标签就可以用了,做成的话还是挺酷炫的-->
<p>
12345678910
</p>
<!--p标签里别留空行-->
<p>
12345
</p>
<p>
123
</p>
<p>
12
</p>
</div>
<script>
window.onload = dawn_type('text',100);
function dawn_type(id,rate) {//rate为显示速率10为标准,越大越慢,越小越快
var objarr=new Array();//储存数据用
var times=0;//设置等待时间
//网上找的一个仿c/c++sleep函数,不好用QAQ
// function sleep(numberMillis) {
// var now = new Date();
// var exitTime = now.getTime() + numberMillis;
// while (true) {
// now = new Date();
// if (now.getTime() > exitTime)
// return;
// }
// }
//往全局加css,当然失败了
//cssText="@keyframes typing {from { width: 0 }}@keyframes caret {50% { border-right-color: transparent; }}"
var obj = document.getElementById(id);//获取父级div的id
obj.style.fontFamily="Consolas, Monaco, monospace";
var p_num = obj.getElementsByTagName("p").length;//获取父元素里p标签个数
function begin(i) {//设置css
console.log(i);
p.style.cssText=objarr[i].css;
}
for(var i=0;i<p_num;i++){
var p=obj.children[i];
var text_length=p.innerHTML.length;//获取每个p标签里文本长度,以此设置css
objarr[i]=new Object();
//设置css
objarr[i].css="width: "+text_length+"ch;white-space: nowrap;overflow: hidden;border-right: .05em solid;animation: typing "+text_length*0.01*rate+"s steps("+text_length+"),caret 1s steps(1) infinite;"
// objarr[i].time=text_length*0.01*rate;
// console.log(objarr[i].css);
// console.log(objarr[i].time);
// p.style.cssText="width: "+text_length+"ch;white-space: nowrap;overflow: hidden;border-right: .05em solid;animation: typing "+text_length*0.01*rate+"s steps("+text_length+"),caret 1s steps(1) infinite;";
console.log(times);
setTimeout(begin(i),times);//全是bugQAQ
times+=text_length*rate*10;
}
}
</script>
</body>
其实需求就是可以动态的让一系列函数根据一定时间顺序执行,但是问题在于如何让一个函数执行结束后等待一段时间后执行另一个函数.
尝试了许多方法后,碰到bug千千万.
- css的优先级比js高?
如图,显示跟设置明明是在同一个函数中,但是运行后css动画是一起动的而显示却是按照时间顺序一个个显示出来,
本来应该是对了的样子QAQ
settimeout作用的函数为啥不能穿参
var time = 1000; for (var i = 0; i < 3; i++) { setTimeout(a(time), time); time += 2000; } function a(time) { console.log(time); }
这样写就是三个时间一起显示出来
var time = 1000;
for (var i = 0; i < 3; i++) {
setTimeout(a, time);
time += 2000;
}
function a() {
console.log("sss");
}
这样写三个sss就是一个一个的显示
node.js跟browser端js有啥区别?
上边的第一段代码在浏览器里可以跑但是在node.js就报错
总觉得离真相很近了,还是要好好看看js啊,争取快点把坑填上…