JS笔记6、对象、事件、移动瞄准、网页计算器

最新推荐文章于 2021-09-29 08:45:45 发布

欧文Z-phone

最新推荐文章于 2021-09-29 08:45:45 发布

阅读量190

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/Z_phone/article/details/87044607

版权

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文主要探讨JavaScript中的对象概念，包括类的实例和HTML标签作为对象。详细讲解了如何获取对象，如通过ID获取。接着介绍了各种事件，如鼠标、表单、键盘和窗口事件，并给出了实例。特别提到了`event`对象，用于保存事件相关信息，如坐标和事件源。此外，还展示了如何实现移动瞄准效果。最后，文章提供了网页计算器的实现案例。

摘要由CSDN通过智能技术生成

对象

类中的具体的实例

在JS角度来看，标签也是对象

标签属性：

HTML属性：对象.HTML属性=值；

CSS属性：对象.style.CSS属性=值；

获取对象的方法：

id：document.getElementById（”id名“）；

事件

用户的动作

鼠标事件：

onclick：点击

onmouseover：当鼠标放上

onmouseout：当鼠标离开

ondblclick：双击事件

onmousedown：鼠标按下

onmouseup：鼠标抬起

onmousemove：鼠标移动

表单事件：

onfocus：获得焦点

onblur：失去焦点

onsubmit：提交事件

onchange：当发生改变的时候

onreset：重置事件

键盘事件：

onkeyup：键盘抬起

onkeydown：键盘按下

onkeypress:键盘按键一次

窗口事件：

onload：页面加载完成后立刻执行的事件

两种方式

1、<script>window.onlad=函数名；</script>

2、<body>onload.”函数名（）“</body>

event：保存事件发生时的相关信息

event必须通过调用的形式传递给函数才能使用

event.clientX：事件发生时的X的坐标

event.clientY：事件发生时的Y的坐标

event.target：事件源

移动瞄准

    <style>
        #m{
            width: 1000px;
            height: 200px;
            border: 2px solid;
        }
    </style>
    <script type="text/javascript">
        function move(e) {
            var obj=document.getElementById("m");
            var X=event.clientX;
            var Y=event.clientY;
            obj.innerHTML="坐标（"+X+"，"+Y+"）";
        }
    </script>
</head>
<body>
<div id="m" onmousemove="move(event)">
    坐标（0，0）
</div>
</body>

运行结果：

innerHTML：获取对象中所有的内容，包括文本内容和标签内容（指的是双标签）

innerText：获取对象中所有的文本内容

例题一：修改div

    <script>    
    function over() {
            var obj=document.getElementById("no1");
            obj.style.background="red";
            obj.style.fontSize="40px";
        }
    </script>
</head>
<body>
<div id="no1" onmouseover="over()">
celiets
</div>

运行结果：

网页计算器

    <script type="text/javascript">
        function cal() {
            //获取第一个input对象的value值
            var obj1=document.getElementById("no1").value;
            //获取第二个input对象的value值
            var obj2=document.getElementById("no2").value;
            //获取第三个input对象
            var obj3=document.getElementById("no3");
            //获取第符号的value值
            var fuhao=document.getElementById("sigh").value;
            obj1=parseFloat(obj1);
            obj2=parseFloat(obj2);
            if(fuhao=="+"){
                var outcome=obj1+obj2;
            }else if(fuhao=="-"){
                var outcome=obj1-obj2;
            } else if(fuhao=="*"){
                var outcome=obj1*obj2;
            }else if(fuhao=="/"){
                var outcome=obj1/obj2;
            }
            obj3.value=outcome;
        }
    </script>
</head>
<body>
<input type="text" id="no1">
<select id="sigh">
    <option value="+">+</option>
    <option value="*">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input type="text" id="no2">
=
<input type="text" id="no3">
<input type="button" value="计算" onclick="cal()">
</body>

欧文Z-phone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS笔记6、对象、事件、移动瞄准、网页计算器

对象类中的具体的实例在JS角度来看，标签也是对象标签属性：HTML属性：对象.HTML属性=值；CSS属性：对象.style.CSS属性=值；获取对象的方法：id：document.getElementById（”id名“）；事件用户的动作鼠标事件：onclick：点击onmouseover：当鼠标放上onmouseout：当鼠标离开ondb...
复制链接

扫一扫

专栏目录