【作业】DOM对象

可以不用挨个儿style属性的去设定，可以使用cssText 写一坨，一起设定。

浏览器大小发生改变

【作业】

【我的作业】

第二题不会啊

MDS 帮助文档

浏览器窗口的那两个属性，是只读的？？？

不知道怎么设置，卡在这了！！！

我只能写出来一个画面上的 div 在抖动！！！汗~~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- type="text/css" -->
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        #id1,#id2{
            background-color:rgb(91, 137, 139);
            width: 200px;
            height: 200px;
            /* position:absolute; */
        }

        #id2{
            position:absolute;
            left: 60px;
            top:350px;
        }
        
        #id33{
            /* position: relative; */
            position:absolute;
            top:550px;
            /* float:inline-end; */
        }
        #id3{
            /* position: relative; */
            position:absolute;
            top:600px;
            /* float:inline-end; */
        }

        #num{
            margin:0px 30px;
        }
    </style>
</head>
<body>
    
    <h1>作业1</h1>
    <input type="button" onclick="a();" value="作业1"/>
    <div id = "id1"></div>
    
    <h1>作业2</h1>
    <input type="button" onclick="a2();" value="作业2"/>
    <input type="button" onclick="a22();" value="作业2div"/>
    <div id = "id2"></div>
    

    <h1 id="id33">作业3</h1>
    <div id="id3" style="flex: auto;">
        <input type="button" onclick="a31();" value=" - " style="width: 60px;float: left;">
        <div id = "num" style="float: left;">0</div>
        <input type="button" onclick="a33();" value=" + " style="width: 60px;float: left;">
    </div>

    <script type="text/javascript">
       // 请编写一个DIV，点击以后不断增加宽度和高度，每次增加1像素让其最终等于整个屏幕的宽度和高度
       function a(){

           var maxW = window.innerWidth;
           var maxH = window.innerHeight;

            var var1 = document.getElementById("id1");
            var1.style.width = (( var1.offsetWidth + 1)>maxW?maxW:( var1.offsetWidth + 1)) + "px";
            var1.style.height = ((var1.offsetHeight + 1)>maxH?maxH:(var1.offsetHeight + 1))+ "px";

       }

       // 点击一个按钮，屏幕进行抖动，就好像扣扣抖动一样
       function a2(){

           var l = window.screenLeft;
           var t = window.screenTop;
           console.log(l);
           console.log(t);
           console.log(window.screenX);
           console.log(window.screenY);
           setTimeout(
              ()=>{
                  window.screenX = l - 10 ;
                  window.screenY = t - 10 ;
                  window.screenLeft = (l - 10) ;//+ "px" ;
                  window.screenTop = (t - 10) ;//+ "px"  ;
                  // 没这属性
                // window.style.left = (l - 10) + "px" ;
                  console.log(window.screenLeft);
                  console.log(window.screenTop);
                  console.log(window.screenX);
                  console.log(window.screenY);
              },500
           );

        //    setTimeout(
        //       ()=>{
        //           window.screenLeft = l + 10 ;
        //           window.screenTop = t + 10 ;
        //           },500
        //    );
           
       }

       function a22(){

        //    console.log(id2.style.left); 
        // id2.style.left = (id2.offsetLeft -10) + "px";
        // id2.style.top = (id2.offsetTop -10) + "px";
        // 向上
        setTimeout(()=>{

            // id2.style.left = (id2.offsetLeft +10) + "px";
            id2.style.top = (id2.offsetTop +10) + "px";
        },50);
        // 向右
        setTimeout(()=>{

            id2.style.left = (id2.offsetLeft +10) + "px";
            // id2.style.top = (id2.offsetTop +10) + "px";
        },100);
        // 向下
        setTimeout(()=>{

            // id2.style.left = (id2.offsetLeft +10) + "px";
            id2.style.top = (id2.offsetTop -10) + "px";
        },150);
        // 向右
        setTimeout(()=>{

            id2.style.left = (id2.offsetLeft -10) + "px";
            // id2.style.top = (id2.offsetTop -10) + "px";
        },200);


       }


       // 编写一个增加 / 减少的按钮 中间数字是0，点击增加就加一，点击减少就减一，但不会为负数。
       var num = document.getElementById("num");
       function a33(){
           num.textContent = parseInt(num.textContent.trim()) + 1;
       }
       function a31(){
           num.textContent = (parseInt(num.textContent.trim()) - 1)<0?0:(parseInt(num.textContent.trim()) - 1);
       }
        
    </script>
</body>
</html>

【老师的解答】

第一题是点击完以后一直能增长，所以设置了定时器，让他一直增长，不是我理解的一点一增长，我理解错了。

另一个问题，原来var 变量可以这么定义，元素，元素宽高。（晕晕晕，不是不是不是，我说错了，就是单纯定义了三个变量）

该元素的绑定后的事件里就能够直接使用该元素的宽高了。

还有一个问题

这样才能避免定时器的重复设定 ~~

每次设定之前都要清除掉前一个，以用来保证只有一直都只有一个定时器。

以下是老师的完整代码。

还有个问题，window对象点出来的，可以不用写window。

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;}
#myDiv{width: 100px;height: 100px;background: black;}

    </style>
</head>
<body>
	<div id='myDiv'></div>
	<script>
		var myDiv = document.getElementById('myDiv'),
			width = 100,height = 100,
			timer = null;
		myDiv.onclick = function(){
			clearInterval(timer);
			timer = setInterval(function(){
				if(width == innerWidth){
				}
				else{
					width = width + 1;
				};

				if(height == innerHeight){

				}
				else{
					height = height + 1;
				}
				
				


				myDiv.style.width = width + 'px';
				myDiv.style.height = height + 'px';



			},3);
		};


	</script>
</body>
</html>

第二题，原来是body体的抖动~

这样就不用多个 setTimeOut了可以取模！！！

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
    body{position: relative;}	


    </style>
</head>
<body id='bodyNode'>
	akldsjlkajsdlkajlksdjlkasj
	<img src="1.jpg">
	<script>
		//var body = document.getElementById('bodyNode');
		
		var num = 0;
		setInterval(function(){
			num = num + 1;
			if(num % 4 == 1){
				document.body.style.left = '-3px';
				document.body.style.top = '-3px';
			};
			if(num % 4 == 2){
				document.body.style.left = '3px';
				document.body.style.top = '-1px';
			};
			if(num % 4 == 3){
				document.body.style.left = '-5px';
				document.body.style.top = '3px';
			};
			if(num % 4 == 0){
				document.body.style.left = '6px';
				document.body.style.top = '-2px';
			};
		},30)


	</script>
</body>
</html>

第三题

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
    body{position: relative;}	


    </style>
</head>
<body id='bodyNode'>
	<button id='btn1'>+</button>
	<span id='span'>0</span>
	<button id='btn2'>-</button>
	<script>
	
		var btn1 = document.getElementById('btn1'),
			btn2 = document.getElementById('btn2'),
			span = document.getElementById('span'),
			num = 0;
		btn1.onclick =function(){
			num = num + 1;
			span.innerHTML = num;
		};

		btn2.onclick = function(){
			num = num - 1;
			if(num == -1){
				num = 0;
			}
			span.innerHTML = num;
		};
	</script>
</body>
</html>

猜你喜欢