27
2017
09

利用JavaScript基础制作小样品

  1. 戳眼
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script> //睁眼 function openEye(){ var eye = document.getElementById("eye"); eye.src = "img/eye01.jpg"; } //闭眼 function closeEye(){ var eye = document.getElementById("eye"); eye.src = "img/eye02.jpg"; } </script>
    </head>
    <body>

        <div onmouseover="closeEye()" onmouseout="openEye()" style="float: left;border: 1px solid #000000;">
            <img id="eye" src="img/eye01.jpg" width="200px" />
        </div>

    </body>
</html>

图片
这里写图片描述
这里写图片描述
2,换皮肤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script> function changeColor(str){ var body = document.getElementById("b"); body.style.backgroundColor = str; } </script>
    </head>
    <body id="b" >

        <button onclick="changeColor('blue')">蓝色</button>
        <button onclick="changeColor('red')">红色</button>
        <button onclick="changeColor('green')">绿色</button>

    </body>
</html>

3,鼠标拖拽
01 事件冒泡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style> div{ width: 300px; height: 300px; border: 1px solid #000000; float: left; margin: 10px 20px; } div p{ background-color: gray; color: #FFFFFF; text-align: center; height: 50px; line-height: 50px; } </style>

        <script> var a = 0;//声明 var b = 0; var c = 0; var d = 0; var e = 0; //鼠标移动事件 function myMove(){ a++; // a = a + 1; var font = document.getElementById("a");//获取font标签对象 font.innerHTML = a; } //鼠标移入事件over function myOver(){ b++; var font = document.getElementById("b");//获取font标签对象 font.innerHTML = b; } //鼠标移出事件out function myOut(){ c++; var font = document.getElementById("c");//获取font标签对象 font.innerHTML = c; } //鼠标移入事件enter function myEnter(){ d++; var font = document.getElementById("d");//获取font标签对象 font.innerHTML = d; } //鼠标移出事件leave function myLeave(){ e++; var font = document.getElementById("e");//获取font标签对象 font.innerHTML = e; } </script>

    </head>
    <body>

        <div onmousemove="myMove()">
            <font id="a">0</font>
            <p>鼠标移动事件onmousemove</p>
        </div>

        <!--事件冒泡-->
        <div onmouseover="myOver()">
            <font id="b" style="border: 1px solid #000000;">0</font>
            <p>鼠标移入事件onmouseover</p>
        </div>

        <div onmouseout="myOut()">
            <font id="c">0</font>
            <p>鼠标移出事件onmouseout</p>
        </div>

        <div onmouseenter="myEnter()">
            <font id="d">0</font>
            <p>鼠标移入事件onmouseenter</p>
        </div>

        <div onmouseleave="myLeave()">
            <font id="e">0</font>
            <p>鼠标移出事件onmouseleave</p>
        </div>

    </body>
</html>

02滚动条事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style> body{ margin: 0; padding: 0; } .cont{ height: 10000px; } #top{ position: fixed; width: 100%; height: 50px; top: 0px; left: 0px; background-color: pink; display: none; } #left{ position: fixed; top: 150px; left: 20px; height: 500px; width: 50px; background-color: green; display: none; } #left ul{ list-style: none; padding-left: 0px; } #left ul li{ border: 1px solid gray; margin: 15px auto; height: 30px; line-height: 30px; text-align: center; } .a{ border: 1px solid #FFFFFF; color: #FFFFFF; } </style>

        <script> // var a = 0; //滚动事件 function myScroll(){ // a++; var i = document.body.scrollTop; var top = document.getElementById("top"); var left = document.getElementById("left"); var f1 = document.getElementById("f1"); var f2 = document.getElementById("f2"); var f3 = document.getElementById("f3"); var f4 = document.getElementById("f4"); var f5 = document.getElementById("f5"); //控制顶部 if(i >= 1000){ top.style.display = "block"; top.innerHTML = i; }else{ top.style.display = "none"; } //控制左侧 if(i >= 2000){ left.style.display = "block"; }else{ left.style.display = "none"; } //显示楼层 if(i >= 2000 && i<=2500){ f1.className = "a"; f2.className = ""; f3.className = ""; f4.className = ""; f5.className = ""; }else if(i>2500 && i<=3000){ f1.className = ""; f2.className = "a"; f3.className = ""; f4.className = ""; f5.className = ""; }else if(i>3000 && i<=3500){ f1.className = ""; f2.className = ""; f3.className = "a"; f4.className = ""; f5.className = ""; }else if(i>3500 && i<=4000){ f1.className = ""; f2.className = ""; f3.className = ""; f4.className = "a"; f5.className = ""; }else if(i>4000 && i<=4500){ f1.className = ""; f2.className = ""; f3.className = ""; f4.className = ""; f5.className = "a"; } } </script>

    </head>
    <body onscroll="myScroll()">

        <div id="left">
            <ul>
                <li id="f1">1F</li>
                <li id="f2">2F</li>
                <li id="f3">3F</li>
                <li id="f4">4F</li>
                <li id="f5">5F</li>
            </ul>
        </div>

        <div id="top"></div>
        <div class="cont"></div>

    </body>
</html>

03焦点事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script> //获取焦点事件 function myFocus(){ } //失去焦点事件 function myBlur(){ var cont = document.getElementById("cont"); var str = cont.value; var f = document.getElementById("f"); if(str == "tom"){ f.color = "red"; f.innerHTML = "这个名字太抢手了,再换一个!"; }else{ f.color = "green"; f.innerHTML = "√"; } } //密码输入效果 //获取焦点 function pwdFocus(){ document.getElementById("img").src = "img/pwd-input.jpg"; } //失去焦点 function pwdBlur(){ document.getElementById("img").src = "img/user-input.jpg"; } </script>
    </head>
    <body>

        用户名:<input id="cont" type="text" onfocus="myFocus()" onblur="myBlur()" /><br />
        密码:<input id="pwd" type="password" onfocus="pwdFocus()" onblur="pwdBlur()" />
        <font id="f" ></font>
        <img id="img" src="img/user-input.jpg" />
    </body>
</html>

04计算鼠标偏移量

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style> body{ margin: 0; padding: 0; } div{ width: 300px; height: 300px; border: 1px solid #000000; margin-top: 20px; margin-left: 30px; } </style>
        <script> //判断鼠标是否按下 var isDown = false; //实时监听鼠标位置 var moveX = 0; var moveY = 0; //记录鼠标按下瞬间的位置 var x = 0; var y = 0; //鼠标按下时移动的偏移量 var mouseMoveX = 0; var mouseMoveY = 0; //div的位置 var div_x = 0; var div_y = 0; function myWheel(){ var cont = document.getElementById("cont"); cont.style.fontSize = "40px"; } //鼠标移动事件 function myMove(event){ moveX = event.clientX; moveY = event.clientY; var cont = document.getElementById("cont"); var mess2 = document.getElementById("mess2"); cont.innerHTML = "x="+moveX+",y="+moveY; //计算鼠标移动偏移量 mouseMoveX = moveX - x; mouseMoveY = moveY - y; //当鼠标按下时才执行 if(isDown){ var new_div_x = div_x + mouseMoveX; var new_div_y = div_y + mouseMoveY; //改变div的位置 cont.style.marginTop = new_div_y; cont.style.marginLeft = new_div_x; mess2.innerHTML = "鼠标移动的偏移量为:x="+mouseMoveX+",y="+mouseMoveY+"<br>"+ "DIV新位置:x="+new_div_x+",y="+new_div_y; } } //鼠标按下事件 function myDown(event){ x = event.clientX; y = event.clientY; isDown = true; var mess = document.getElementById("mess"); var cont = document.getElementById("cont"); //获取DIV的位置 div_x = cont.offsetLeft; div_y = cont.offsetTop; mess.innerHTML = "鼠标按下了,当前鼠标位置:x="+x+",y="+y+"<br>"+ "DIV的位置:x="+div_x+",y="+div_y; } //鼠标松开事件 function myUp(){ var mess = document.getElementById("mess"); mess.innerHTML = "鼠标松开了"; isDown = false; mouseMoveX = 0; mouseMoveY = 0; } </script>
    </head>
    <body>

        <div id="cont" onwheel="myWheel()" onmouseup="myUp()" onmousedown="myDown(event)" onmousemove="myMove(event)">

        </div>
        <font id="mess"></font><br>
        <font id="mess2"></font>

    </body>
</html>
上一篇:表单验证 下一篇:Android MagicaSakura多主题框架