14天入门JavaScript-day one

第一天总结的是一些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