JavaScript基础7实战练习

最新推荐文章于 2024-07-16 11:12:44 发布

强仔fight

最新推荐文章于 2024-07-16 11:12:44 发布

阅读量574

点赞数 1

分类专栏： JavaScript基础

本文链接：https://blog.csdn.net/qq_35076836/article/details/87443390

版权

JavaScript基础专栏收录该内容

8 篇文章 1 订阅

订阅专栏

练习1
小球在盒子内部打转

<style type="text/css">
    #box{
        width=800px;
        height=600px;
        border:solid 1px red;
        position:relative;
     }
    #ball{
         width:50px;
         heigth:50px;
         border-radius:25px;
         background-color:blue;
         position:absolute;
         top:0px;
         left:0px;
     }                           设置盒子与小球的样式     
</style>

<body>
    <div id="box">
         <div id="ball">
         <div>
    </div>
</body>                      创建小球与盒子

<script type="text/javascript">
    var ball = getElementById("ball")
    var speedx = 5
    var speedy = 5                          设置小球的x,y轴变化范围为5
    setInterval( function(){
        ball.style.left = ball.offsetLeft +speedx+"px"
        ball.style.top = ball.offestTop+speedy+"px"
        if(ball.offsetTop >=600-50 || ball.offsetTop <=0){
               speedy *= -1
       }
        if(ball.offsetLeft >=800-50 || ball.offsetLeft <=0){
               speedx* = -1                            小球撞到盒子边界逻辑判断
       }       
    },50)   时间函数
</script>

练习2
改变div盒子颜色,大小等

<div id="box" style="width:100px; height:200px; background-color:red">
</div>                  创建一个背景色为红色的div盒子
<button onclick="changeColor()">改变颜色</button>
<button onclick="changeSize()">改变大小</button>           两个按钮

<script type="text/javascript">
    var jsDiv = document.getElementById("box")
    function changeColor(){
         jsDiv.style.backgroundColor="yellow"          改变背景颜色
    }
     function changeSize(){
         jsDiv.style.width="200px"                改变盒子宽度
    }
</script>

练习3
随时间改变位置的div盒子

<body style="height:1000px;position:relative">

<div id="box" style="width:100px; height:100px; background-color:blue; position:absolute;top:0px;left:0px;">
</div>                      创建一个div盒子

<button onclick="move()" style="position:absolute;top:100px;left:100px">开始移动</button>
                                创建一个按钮
<script type="text/javascript">
    var div = document.getElementById("box")
    function move(){
         setInterval( function(){
           var i =parseInt(window.getComputedStyle(div,null).left)       获取左边距
           div.style.left=i+10+"px"
           var j =parseInt(window.getComputedStyle(div,null).top)      获取上边距
           div.style.top=j+10+"px"
         },1000)             隔一秒钟执行一次函数
    }                           移动函数
</script>
</body>

练习4
动态创建节点

<div id="box"></div>
<script type="text/javascript">
    var input = document.createElement("input")
    input.setAttribute("type","txt")
    input.setAttribute("placeholder"."请输入文字")
    document.getElementById("box").appendChild(input)
</script>.