14天入门JavaScript-day one

[亡魂溺海] 提交于 2020-03-28 20:47:54

第一天总结的是一些HTML DOM 事件中的鼠标事件
<!--more-->

js事件中主要的都是对样式的显示隐藏,display:none or display:block

其中最简单的就是使用onclick事件对属性进行显示隐藏或者改变class属性

demo1

alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

语法

alert(message)

要在 window 上弹出的对话框中显示的纯文本(而非 HTML 文本)

    <input type="button" value="按钮" onclick="alert('我是一个消息框')">

demo2

鼠标移入移出显示隐藏div块

<input type="checkbox" 
onmousemove="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1').style.display='none';">
<div id="div1" class="dsn">显示隐藏div块</div>

更多的鼠标事件

属性 描述 DOM
onclick 当用户点击某个对象时调用的事件句柄。 2
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发  
ondblclick 当用户双击某个对象时调用的事件句柄。 2
onmousedown 鼠标按钮被按下。 2
onmouseenter 当鼠标指针移动到元素上时触发。 2
onmouseleave 当鼠标指针移出元素时触发 2
onmousemove 鼠标被移动。 2
onmouseover 鼠标移到某元素之上。 2
onmouseout 鼠标从某元素移开。 2
onmouseup 鼠标按键被松开。 2

参照菜鸟教程

demo3

使用函数简单的对元素进行显示隐藏

    <script>
    function showHide()
    {
        var oDiv=document.getElementById('div2');
        
        if(oDiv.style.display=='block')
        {
            oDiv.style.display='none';
        }
        else
        {
            oDiv.style.display='block';
        }
    }
    </script>
    <input type="button" value="显示隐藏" onclick="showHide()" />
    <div id="div2"></div>

demo4

使用函数改变元素css属性值

        <script>
        function toGreen()
        {
            var oDiv=document.getElementById('div3');
            
            oDiv.style.width='300px';
            oDiv.style.height='300px';
            oDiv.style.background='green';
        }

        function toRed()
        {
            var oDiv=document.getElementById('div3');
            
            oDiv.style.width='200px';
            oDiv.style.height='200px';
            oDiv.style.background='red';
        }
    </script>
        <div id="div3" onmouseover="toGreen()" onmouseout="toRed()"></div>

demo5

简单的对网页的换肤功能
要在最前面的body中加入id="changebg"

    <script>
    function changebgred(){
        var oL=document.getElementById('changebg');
        oL.style.background='red'
    }
    function changebggreen(){
        var oL=document.getElementById('changebg');
        oL.style.background='green'
    }
    </script>
    <a onclick="changebgred()" class="bon">红色</a>
    <a onclick="changebggreen()" class="bon">绿色</a>

demo6

className的使用

    <style>
        #div5 {
            width: 100px;
            height: 100px;
            border: 1px solid #000
        }
        
        .box {
            background: red;
        }
        
        .box2 {
            background: #fff;
        }
    </style>
<script>
function toRe(){
    var oY=document.getElementById('div5')
    oY.className='box';
}
function toBa(){
    var oY=document.getElementById('div5')
    oY.className='box2';
}
</script>
    <input type="button" value="变红" onclick="toRe()" />
    <input type="button" value="变白" onclick="toBa()" />
    <div id="div5">

源码查看
查看博客

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hhjijc221cb

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!