JavaScript编程技术实验报告8

最新推荐文章于 2023-07-05 11:19:20 发布

Su魏

最新推荐文章于 2023-07-05 11:19:20 发布

阅读量1.1k

点赞数

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44788220/article/details/125488545

版权

javaScript 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

一、实验目的

了解JavaScript事件处理的基本概念

理解JavaScript事件处理模型

掌握JavaScript常用事件及处理

二、预习内容及要求（要求写出预习内容）

1. 事件流模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预习内容及要求</title>
    <style type="text/css">
        div{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <!--JS事件流模型-->
    <div id="i1" style="height: 150px;width: 150px;background: rgb(113, 139, 63);" onclick="alert('第一层绿色')">
        <div id="i2" style="height: 100px;width: 100px;background: rgb(125, 25, 207);" onclick="alert('第二层紫色')">
            <div id="i3" style="height: 50px;width: 50px;background: rgb(247, 0, 255);" onclick="alert('第三层皮粉色')"></div>
        </div>
    </div>
    <script>
        function myfunc(){
         var inp=document.getElementById("myinp");
         alert(inp.value);
        }
    </script>
    <input id="myinp" type="text" name="username" value="enter username"/>
    <input type="button" value="用户名" onclick="myfunc()"/>
    <script>
        function MOver(){
            var myimg=document.getElementById("myimg");
            myimg.src="2.gif";
        }
        function MOut(){
          var myimg=document.getElementById("myimg");
          myimg.src="1.jpg";
        }
    </script>
  <!--<img id="myimg" src="1.jpg" alt="mouse" onmouseover="MOver()"
  onmouseout="MOut()"/>-->
  <input id="btn1" type="button" value="click"/>
<!--事件对象-->
<script>
    var count=0;
    var btn1=document.getElementById("btn1");
    btn1.onclick=function(event){
        alert("事件类型："+event.type+"你点击了"+(++count)+"下");
         
    }
</script>
<!-- 事件类型
焦点事件
鼠标和滚轮事件
键盘和文本事件
-->
<br />
<!--焦点事件-->
<script>
            window.onload = function(){undefined
                var test1 = document.getElementById('text1');
                test1.onfocus = function(){
                    if(this.value == '请输入内容'){undefined
                        this.value = '';
                    }
                }
                test1.onblur = function(){
                    if(this.value == ''){undefined
                        this.value = '请输入内容';
                    }
                }
            }
</script>
<input type="text" id="text1" value="请输入内容" />
<!--鼠标和滚轮事件-->
<br/>
<label for="wheelDelta">滚动值:</label><input type="text" id="wheelDelta"/>
<script type="text/javascript"> 
var a;
var fun1=function(a){ 
  a=a || window.event; 
 var t=document.getElementById("wheelDelta"); 
if(a.wheelDelta){
 t.value=a.wheelDelta; 
 }
} 
if(document.addEventListener){ 
 document.addEventListener('DOMMouseScroll',fun1,false); 
}
window.onmousewheel=document.onmousewheel=fun1;

</script>
<!--键盘和文本事件-->
<br/>
键盘和文本事件:
<input type="text" name="input" id="myinput" value="1">
<script>
document.getElementById('myinput').addEventListener('keydown',function(e){
    document.write("e.type:"+e.type+"    e.target.value:"+e.target.value+"   e.keyCode:"+e.keyCode);
})
</script>
</body>
</html>

2. 事件处理程序

3. 事件对象：

4. 事件类型

焦点事件

鼠标和滚轮事件

键盘和文本事件：

三、实验内容、操作过程及实验结果记录

1. 对于页面上的一幅图片，鼠标悬停在图片上时切换成另一幅图，鼠标离开时，还原成原来的图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一题</title>
</head>
<body>
    <!--1. 对于页面上的一幅图片，鼠标悬停在图片上时切换成另一幅图，鼠标离开时，还原成原来的图片-->
    <script>
        function MOver(){
            var myimg=document.getElementById("myimg");
            myimg.src="2.gif";
        }
        function MOut(){
          var myimg=document.getElementById("myimg");
          myimg.src="1.jpg";
        }
    </script>
  <img id="myimg" src="1.jpg" alt="mouse" onmouseover="MOver()"
  onmouseout="MOut()"/>
  <input id="btn1" type="button" value="click"/>
</body>
</html>

鼠标离开页面时显示这张图片：

鼠标停留在图画的切换成下图这张图片:

2. 实现在页面上的一幅图片，能够跟随鼠标移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二题</title>
    <style>
        img {
            /* 因为图片不能影响页面其他的布局，所以用绝对定位 */
            position: absolute;
        }
    </style>
</head>
<body>
    <!--2. 实现在页面上的一幅图片，能够跟随鼠标移动。-->
    <img src="3.gif" alt="人物">
    <script>
        var tu1 = document.querySelector('img');
        document.addEventListener('mousemove', function(a) {
            // 获取当前鼠标到页面的距离
            var x = a.pageX;
            var y = a.pageY;
            // 选用图片大小为50*50像素
            tu1.style.left = x - 25 + 'px';
            tu1.style.top = y - 25 + 'px';
        });
    </script>
</body>
</html>

3. 实现在页面上的一幅图片，可以通过上下左右键控制图片在页面上移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三题</title>
    <style>
        img{
            cursor: pointer;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
    <!--实现在页面上的一幅图片，可以通过上下左右键控制图片在页面上移动。-->
    <img src="3.gif" id="img1" >
    <script>
        img1=document.getElementById('img1');
        x1=0;//起始位置为0
        x2=10;//增加量为10
        y1=0;
        y2=10;
        document.onkeydown=function(event){
            k=event.keyCode;
            switch(k){
                case 37://左移
                x1-=x2;
                img1.style.left=x1+'px';
                break;
                case 38://上移
                y1-=y2;
                img1.style.top=y1+'px';
                break;
                case 39://右移
                x1+=x2;
                img1.style.left=x1+'px';
                break;
                case 40://下移
                y1+=y2;
                img1.style.top=y1+'px';
                break;
            }
        }
    </script>
</body>
</html>

4.在页面上建立一个自定义菜单，菜单内容如图所示，当单击菜单选项时，可以改变页面上文字相应设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第四题</title>
</head>
<body>
    <!--在页面上建立一个自定义菜单，菜单内容如图所示，当单击菜单选项时，可以改变页面上文字相应设置。-->
    <h3 id="text1">大家好，这里是计算机工程学院！</h3><br/>
    <button id="but1" onclick="but1()">绿色楷体</button>
    <button id="but2" onclick="but2()">红色幼圆</button>
    <button id="but3" onclick="but3()">粉色楷书</button>
    <script>
    function but1(){
    var text1=document.getElementById("text1");
    text1.style.color="green";
    text1.style.fontStyle="KaiTi_GB2312";
    }
    function but2(){
    var text1=document.getElementById("text1");
    text1.style.color="red";
    text1.style.fontStyle="YouYuan";
   }
   function but3(){
    var text1=document.getElementById("text1");
    text1.style.color="pink";
    text1.style.fontStyle="STKaiti";
   }
    </script>
</body>
</html>

5.在页面上有两个div块，实现内部div块可以在其外部容器div块中随意拖动，并实现磁吸效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第五题</title>
    <style>
        #test {
            width: 100px;
            height: 100px;
            background: #000;
            position: absolute;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="div1" style="background-color: aqua;width: 100px;height: 100px;position: absolute;left: 50px;top: 50px">
        <div id="div2" style="height: 40px;width:100%;background-color: antiquewhite;position: absolute;left: 0px;top: 0px"></div>
      </div>
      <script>
 var div1 = document.getElementById("div1");
        document.addEventListener('mousemove', function(a) {
            // 获取当前鼠标到页面的距离
            var x = a.pageX;
            var y = a.pageY;
            // 选用图片大小为50*50像素
            div1.style.left = x - 25 + 'px';
            div1.style.top = y - 25 + 'px';
        });
        var div2 = document.getElementById("div2");
        document.addEventListener('mousemove', function(a) {
            // 获取当前鼠标到页面的距离
            var x = a.pageX;
            var y = a.pageY;
            // 选用图片大小为50*50像素
            div2.style.left = x - 25 + 'px';
            div2.style.top = y - 25 + 'px';
        });
       
      </script>
</body>
</html>

6.页面上有一张图片和一个自定义滚动条，实现如下效果：拖动滚动条，可以改变图片大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第六题</title>
    <style type="text/css">
        #all{
        width: 500px;
        height: 50px;
        background-color: rgb(241, 237, 234);
        border-radius: 25px;
        margin: 0 auto;
        position: relative;
        }
        #div1{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: rgb(236, 216, 185);
        position: absolute;
        } 
        #box{
        background-color: rgb(127, 170, 114);
        position: absolute;
        top: 200px;
        left: 200px;
        }
        </style>
</head>
<body>
    <!--页面上有一张图片和一个自定义滚动条，实现如下效果：拖动滚动条，可以改变图片大小。-->
    <div id="all">
        <div id="div1"></div>
        </div>
        <div id="box"></div>
        <script type="text/javascript">
        var oAll = document.getElementById("all");
        var oDiv1 = document.getElementById("div1");
        var oBox = document.getElementById("box");
        var maxL = oAll.clientWidth - oDiv1.offsetWidth;
        oDiv1.onmousedown = function(){
        var ev = ev || window.event;
        var lessX = ev.clientX - oDiv1.offsetLeft; 
         
        document.onmousemove = function(){
        var ev = ev || window.event;
        var posL = ev.clientX - lessX;
        if(posL<0){
        posL = 0;
        }
        if(posL>maxL){
        posL = maxL;
        }
        oDiv1.style.left = posL + "px";
        //滚动条移动的百分比
        var per = posL/maxL;
        //定义宽0~300
        oBox.style.width = 300*per+"px";
        oBox.style.height = 300*per+"px";
        oBox.style.marginTop = -oBox.offsetHeight/2+"px";
        oBox.style.marginLeft = -oBox.offsetWidth/2+"px";
        }
        }
         
        document.onmouseup =function(){
        document.onmousemove = null;
         
        }
         
        </script>
</body>
</html>