js课程 6-15 js简单弹力球如何实现
一、总结
一句话总结：a、通过document的documentElement属性获取可是区域的高； b、通过增值变为负的实现到底部后反弹
1、document的body属性和documentElement属性的区别是什么？
比如body中只有一个img的时候
那么body的区域就是只有img的这么大
documentElement的范围就是整个document文档
2、如何实现弹力球到底部之后反弹的问题？
让增值变为负的即可
41 setInterval(function(){
42 ys+=yv;
43
44 if(ys>=diffHeight){
45 ys=diffHeight;
46 yv=-yv;
47 }
48
49 if(ys<=0){
50 yv=-yv;
51 }
52 imgobj.style.top=ys+'px';
53 },10);
3、js中如何设置元素的样式？
元素.style.样式名，比如imgobj.style.top
52 imgobj.style.top=ys+'px';
4、js中如何获取页面的宽高？
通过document的documentElement属性
1.有效的高 屏幕可视的高
document.documentElement.clientHeight
2.屏幕的总高度 屏幕的总高度
document.documentElement.scrollHeight
3.滚动的高 滚动的高度
document.documentElement.scrollTop
34 screenHeight=document.documentElement.clientHeight;
35 imgHeight=128;
36 diffHeight=screenHeight-imgHeight;
5、div中放img，比如img是128*128，div也是128*128，但是img还是把div多顶了4px，div变成了128*132，如何解决？
出现的原因是因为图片对齐的问题，虽然这里没有文字，其实也就是块标签中的行标签对齐的问题
a、img设置display为block
b、div设置overflow为hidden
6、jquery和js中事件的区别是什么？
js中加了on，比如onkeydown，而jquery中就是keydown
二、js简单弹力球如何实现
1、相关知识
获取3个高度:
1.有效的高 屏幕可视的高
document.documentElement.clientHeight
2.屏幕的总高度 屏幕的总高度
document.documentElement.scrollHeight
3.滚动的高 滚动的高度
document.documentElement.scrollTop
2、代码
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 margin:0px; 10 padding:0px; 11 } 12 13 #imgid{ 14 width:128px; 15 height:128px; 16 position: absolute; 17 top:0px; 18 left:0px; 19 } 20 21 #imgid img{ 22 display: block; 23 } 24 25 </style> 26 </head> 27 <body> 28 <div id='imgid'> 29 <img src="fb.png"> 30 </div> 31 </body> 32 <script> 33 imgobj=document.getElementById('imgid'); 34 screenHeight=document.documentElement.clientHeight; 35 imgHeight=128; 36 diffHeight=screenHeight-imgHeight; 37 38 ys=0; 39 yv=10; 40 41 setInterval(function(){ 42 ys+=yv; 43 44 if(ys>=diffHeight){ 45 ys=diffHeight; 46 yv=-yv; 47 } 48 49 if(ys<=0){ 50 yv=-yv; 51 } 52 imgobj.style.top=ys+'px'; 53 },10); 54 </script> 55 </html>