Skip to content

Commit 4b01e49

Browse files
amydevyaamydevya
committed
new
1 parent 3c8a64e commit 4b01e49

39 files changed

Lines changed: 1093 additions & 0 deletions

‎10期JS正式课/正式课周末第三周/第一天/.idea/.name‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎10期JS正式课/正式课周末第三周/第一天/.idea/encodings.xml‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎10期JS正式课/正式课周末第三周/第一天/.idea/misc.xml‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎10期JS正式课/正式课周末第三周/第一天/.idea/modules.xml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎10期JS正式课/正式课周末第三周/第一天/.idea/workspace.xml‎

Lines changed: 340 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎10期JS正式课/正式课周末第三周/第一天/.idea/第一天.iml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎10期JS正式课/正式课周末第三周/第一天/1.css盒子模型.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
html,body{
8+
height: 200%;
9+
}
10+
*{
11+
margin:0;
12+
padding:0;
13+
}
14+
div{
15+
width: 200px;
16+
height:200px;
17+
background: red;
18+
padding:10.238947928347928347px;
19+
border:20px solid green;
20+
margin:30px;
21+
overflow: hidden;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<div class="div" id="div">新京报讯 （记者刘夏）9月22日凌晨，微信“小程序”开始内测。自“微信之父”张小龙首次透露将推出“微信应用号”，经历大半年才初见真身，导致这两日APP开发时代会否终结的话题再度甚嚣尘上。
27+
小程序能否“干掉”APP？
28+
腾讯高级副总裁、微信产品负责人张小龙曾在1月份的“微信公开课”活动上表示，希望存在一种新的公众号形态，用户关注了一个公众号，就像安装了一个APP一样。他当时将其称之为“应用号”。
29+
9月22日该产品现身，名字换成了“小程序”。张小龙称，“小程序”是一种不需要下载安装即可使用的应用。“扫一扫或者搜一下即可打开，也体现了 用完即走 的理念。”他表示，用户不用关心是否安装太多应用的问题。</div>
30+
<script>
31+
var oDiv=document.getElementById('div');
32+
console.dir(oDiv.scrollHeight);
33+
</script>
34+
</body>
35+
</html>

‎10期JS正式课/正式课周末第三周/第一天/2.offset.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
div{
8+
padding:50px;
9+
border: 20px solid black;
10+
font-size: 30px;
11+
}
12+
#box1{
13+
width: 600px;
14+
height: 600px;
15+
background: red;
16+
}
17+
#box2{
18+
width: 400px;
19+
height: 400px;
20+
background: green;
21+
position: relative;
22+
}
23+
#box3{
24+
width: 200px;
25+
height: 200px;
26+
background: blue;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div id="box1">box1
32+
<div id="box2">box2
33+
<div id="box3">box3</div>
34+
</div>
35+
</div>
36+
<script>
37+
//求box3的offsetLeft
38+
/*offset封装的思路：
39+
* 1、先求出第一个定位父级,且到第一个定位父级的距离
40+
* l=curEle.offsetLeft;
41+
* t=curEle.offsetTop;
42+
* par=curEle.offsetParent;
43+
* 2.如果有定位父级的话，继续找定位父级的定位父级；
44+
*
45+
*
46+
* */
47+
var oBox3=document.getElementById('box3');
48+
//console.log(oBox3.offsetLeft)
49+
//[left,top] offset()[0]->left offset()[1]
50+
//{left:l,top:t} offset().left offset().top
51+
//offset:当前元素距离body的偏移量：left top
52+
alert(offset(oBox3).top)
53+
function offset(curEle){
54+
// 1、先求出第一个定位父级,且到第一个定位父级的距离
55+
var l=curEle.offsetLeft;
56+
var t=curEle.offsetTop;
57+
var par=curEle.offsetParent;
58+
//2.如果第一个定位父级存在，继续往上找他的定位父级，中间不断的累加left和border
59+
while(par){
60+
if(navigator.userAgent.indexOf('MSIE 8.0') === -1){//不是IE8的时候，还需要累加边框
61+
l+=par.clientLeft;
62+
t+=par.clientTop;
63+
}
64+
l+=par.offsetLeft;
65+
t+=par.offsetTop;
66+
par=par.offsetParent;
67+
}
68+
return {left:l,top:t}; //返回值必须是个对象；
69+
}
70+
71+
72+
</script>
73+
</body>
74+
</html>

‎10期JS正式课/正式课周末第三周/第一天/3.getCss.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
html,body{
8+
height: 200%;
9+
}
10+
*{
11+
margin:0;
12+
padding:0;
13+
}
14+
div{
15+
width: 200px;
16+
height:200px;
17+
background: red;
18+
padding:10.238947928347928347px;
19+
border:20px solid green;
20+
margin:30px;
21+
overflow: hidden;
22+
opacity: 0.3;
23+
filter:alpha(opacity=30)
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<div class="div" id="div" style="height: 400px;">新京报讯 （记者刘夏）9月22日凌晨，微信“小程序”开始内测。自“微信之父”张小龙首次透露将推出“微信应用号”，经历大半年才初见真身，导致这两日APP开发时代会否终结的话题再度甚嚣尘上。
29+
小程序能否“干掉”APP？
30+
腾讯高级副总裁、微信产品负责人张小龙曾在1月份的“微信公开课”活动上表示，希望存在一种新的公众号形态，用户关注了一个公众号，就像安装了一个APP一样。他当时将其称之为“应用号”。
31+
9月22日该产品现身，名字换成了“小程序”。张小龙称，“小程序”是一种不需要下载安装即可使用的应用。“扫一扫或者搜一下即可打开，也体现了 用完即走 的理念。”他表示，用户不用关心是否安装太多应用的问题。</div>
32+
<script src="utils.js"></script>
33+
<script>
34+
var oDiv=document.getElementById('div');
35+
//alert(utils.getCss(oDiv,'opacity'))
36+
//alert(getComputedStyle(oDiv,false).height)
37+
//getComputedStyle:得到计算机计算过的样式； 兼容标准浏览器，但不兼容IE6-8
38+
//alert(oDiv.currentStyle.height) //兼容IE6-8，但不兼容标准浏览器
39+
//1.通过属性判断 处理兼容--不想有报错的情况
40+
//alert('getComputedStyle' in window) //true:getComputedStyle ; false:currentStyle
41+
//if(window.getComputedStyle) //true:getComputedStyle ; false:currentStyle
42+
//if(typeof window.getComputedStyle === 'function')
43+
//getCss:获取 元素 身上的 某个属性 值；
44+
//返回值：获取到的属性值
45+
/*function getCss(curEle,attr){
46+
var val=null;
47+
if('getComputedStyle' in window){//标准浏览器
48+
val=getComputedStyle(curEle,false)[attr];
49+
}else{
50+
val=curEle.currentStyle[attr];
51+
}
52+
return val;
53+
}
54+
*/
55+
//2.浏览器异常捕获
56+
/*function getCss(curEle,attr){
57+
var val=null;
58+
try{
59+
val=getComputedStyle(curEle,false)[attr];
60+
}catch(e){
61+
val=curEle.currentStyle[attr];
62+
}
63+
return val;
64+
}*/
65+
//3.浏览器信息判断
66+
//alert(/MSIE (6|7|8)\.0/.test(window.navigator.userAgent))
67+
//if(window.navigator.userAgent.match(/MSIE (6|7|8)\.0/)) //IE6-8
68+
//if(window.navigator.userAgent.search(/MSIE (6|7|8)/) === -1) //标准浏览器
69+
function getCss(curEle,attr){
70+
var val=null;
71+
var reg=null;
72+
if('getComputedStyle' in window){
73+
val=getComputedStyle(curEle,false)[attr];
74+
}else{
75+
//升级2：处理透明度
76+
if(attr==='opacity'){
77+
val=curEle.currentStyle.filter;//'alpha(opacity=30)';
78+
reg=/^alpha\(opacity[=:](\d+)\)$/i;//g 解决正则的懒惰性，当我们使用test来进行校验的时候，lastIndex：0；校验完后，再用exec时，lastIndex已经变成了17，那么exec就无法捕获到内容，拿到的值就是null；
79+
return reg.test(val)?reg.exec(val)[1]/100:1;
80+
}
81+
val=curEle.currentStyle[attr];
82+
}
83+
//升级1：'+200.222px' '-200px' '200px'
84+
reg=/^([+-])?(\d+(\.\d+)?(px|pt|rem|em))$/;
85+
return reg.test(val)?parseFloat(val):val;
86+
}
87+
88+
89+
90+
91+
92+
93+
</script>
94+
</body>
95+
</html>

‎10期JS正式课/正式课周末第三周/第一天/4.同步和异步.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
/*var n=1;
10+
setTimeout(function(){
11+
alert(++n)
12+
},0)
13+
while(n){};
14+
alert(n)*/
15+
var n=0;
16+
setTimeout(function(){
17+
n+=2;
18+
alert(n)
19+
},3)
20+
setTimeout(function(){
21+
n+=5;
22+
alert(n)
23+
},0)
24+
for(var i=0; i<1000000; i++){};
25+
alert(n)
26+
27+
28+
29+
30+
31+
32+
33+
34+
35+
36+
37+
</script>
38+
</body>
39+
</html>

0 commit comments

Comments
 (0)