【web】JavaScript

2021/5/15 12:28:44

编程Tag： javascript web function var div style getElementById document

本文主要是介绍【web】JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

切换图片

有两个很重要的知识点：
(1)getElementById
(2)substring(0, Object.indexOf(“px”));获取数字
(3)切换页面：getElementById.style.float = "right"来修改页面浮动，进而改变图片出现位置。
(4) window.setInterval(Switch, 100);设置每XXms执行一次函数。

<html><head>
    <title>$Title$title>
    <script type="text/javascript">
        var x = 1;
        var y = 2;
        var maxpicNum = 3;
        var timeOut = 30;
        var temp = 30;

        function Switch() {
            var leftObj = document.getElementById("pic" + x);
            var rightObj = document.getElementById("pic" + y);

            var leftWidth = leftObj.style.width;
            var leftWidthNum = leftWidth.substring(0, leftWidth.indexOf("px"));

            var rightWidth = rightObj.style.width;
            var rightWidthNum = rightWidth.substring(0, rightWidth.indexOf("px"));

            if (leftWidthNum > 0) {
                leftObj.style.width = (Number(leftWidthNum) - 50) + "px";
                rightObj.style.width = (Number(rightWidthNum) + 50) + "px";
            } else {
                if (temp == 0) {
                    temp = timeOut;
                    x = x == maxpicNum ? 1 : x + 1;
                    y = y == maxpicNum ? 1 : y + 1;
                    if (y == 1) {
                        document.getElementById("pic1").style.float = "right";
                    } else {
                        document.getElementById("pic1").style.float = "left";
                    }
                } else {
                    temp--;
                }
            }
        }

        function autoSwich() {
            //setInterval设置暂停时间300ms
            window.setInterval(Switch, 100);
        }
    script>head><body><div style="width: 400px;float: left;height: 280px;background-color: gray;">
    <div id="pic1" style="width: 400px;height: 280px;float: left;">
        <img style="width: 100%;height: 100%" src="imgs/pic1.png" alt="第一张">
    div>
    <div id="pic2" style="width: 0px;height: 280px;float: left;">
        <img style="width: 100%;height: 100%" src="imgs/pic2.png" alt="第二张">div>
    <div id="pic3" style="width: 0px;height: 280px;float: left;">
        <img style="width: 100%;height: 100%" src="imgs/pic3.png" alt="第三张">div>div><input type="button" value="Switch" onclick="Switch()"/><input type="button" value="AutoSwitch" onclick="autoSwich()"/>body>html>

菜单悬停

【1】 position:absolute 页面可以重叠
【2】display: block显示 / none不显示
【3】onmousedown || onm ouseup 当鼠标抬起
【3】 onm ouseout || onm ouseovre || onm ousemove 当鼠标移动

<html><head>
    <title>Titletitle>
    <script>
        var timeOut;

        function showCart1() {
            var showCart1 = document.getElementById("showCart1");
            showCart1.style.display = "block";
        }

        function unShowCart1() {
            timeOut = window.setTimeout(function () {
                var unShowCart1 = document.getElementById("showCart1");
                unShowCart1.style.display = "none";
            }, 500);
        }

        function keepCart1() {
            window.clearTimeout(timeOut);
            showCart1()
        }

        function showCart2() {
            var showCart2 = document.getElementById("showCart2");
            showCart2.style.display = "block";
        }

        function unShowCart2() {
            timeOut = window.setTimeout(function () {
                var unShowCart2 = document.getElementById("showCart2");
                unShowCart2.style.display = "none";
            }, 1000);
        }

        function keepCart2() {
            window.clearTimeout(timeOut);
            showCart2()
        }

    script>head><body><div style="width:700px; height:420px; background:#888888;">
    <div style="float:left; width:120px; height:420px; background:#ffaaaa;">
        <ul style="width:120px; line-height:45px;">
            <li onmouseover="showCart1()"
                onmouseout="unShowCart1()"
                onmousedown="showCart1()">菜单1            li>
            <li onmouseover="showCart2()"
                onmouseout="unShowCart2()"
                onmousedown="showCart2()">菜单2            li>
            <li>菜单3li>
        ul>
    div>
    <div style="float:left; width:580px; height:420px; background:#ffffaa;">
        <div style="position:absolute; width:550px; height:400px; background:#aaffaa;">
            主页的轮播图区域        div>
        <div onmouseover="keepCart1()"
             onmouseout="unShowCart1()"
             id="showCart1"
             style="position:absolute; display:none; width:530px; height:390px; background:#aaaaff;">
            <ul style="list-style:none;">
                <li>二级菜单 | 男装 | 女装li>
                <li>二级菜单 | 男装 | 女装li>
                <li>二级菜单 | 男装 | 女装li>
            ul>
        div>
        <div onmouseover="keepCart2()"
             onmouseout="unShowCart2()"
             id="showCart2"
             style="position:absolute; display:none; width:430px; height:190px; background:#aaaaff;">
            <ul style="list-style:none;">
                <li><font size="9">二级菜单font>li>
            ul>
        div>
    div>div>body>html>

getParameter()是获取POST/GET传递的参数值；
getInitParameter获取Tomcat的server.xml中设置Context的初始化参数
getAttribute()是获取对象容器中的数据值；
getRequestDispatcher是请求转发。

这篇关于【web】JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

【web】JavaScript

切换图片

菜单悬停

相关编程文章