`
shuaigg.babysky
  • 浏览: 571247 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

javascript小练习

JavaScript 
阅读更多

<html>
    <head>
        <style>
            #leftNavi {
                width:200px;
                height:800px;
                border:solid 1px;
                background-color:black;
            }
            #leftNavi button {
                width:200px;
            }
            #leftNavi .menu {
                position:relative;
                background-color:black;
                color :white;
                font-size:12px;
                text-align:center;
            }
            #leftNavi .menu img {
                display:inline-block;
                margin-top:10px;
                border-width:0px;
            }
            .distance {
                display:inline-block;
            }
            .one_block {
                width:200px;
            }
            .upBtn {
                position:relative;
                left:100px;
                top:50px;
            }
            .downBtn {
                position:relative;
                left:78px;
                top:250px;
            }
            .items {
                overflow:hidden;
                height:300px;
            }
        </style>
        <script>
            function makeBorder(obj) {
                obj.style.width = '30px';
                obj.style.height = '30px';
                obj.style.border = 'solid 1px white';
            }
            function leaveBorder(obj) {
                obj.style.width = '32px';
                obj.style.height = '32px';
                obj.style.border = 'none';
            }
            function moveUp(obj) {
                var top = obj.parentNode.getElementsByTagName('div')[0].scrollTop;
                top = top - 30;
                if(top <= 0) {
                    top = 0;
                }
                obj.parentNode.getElementsByTagName('div')[0].scrollTop = top;
               
            }
           
            function moveDown(obj) {
                var height = obj.parentNode.getElementsByTagName('div')[0].scrollHeight / 2;
                var top = obj.parentNode.getElementsByTagName('div')[0].scrollTop;
                top = top + 30;
               
                if(top >= height) {
                   
                } else {
                    obj.parentNode.getElementsByTagName('div')[0].scrollTop = top;
                }
            }8
           
            window.onload = doOnload;
            function doOnload() {
                var reg = /^menu_\d$/;
                var btns = document.getElementsByTagName('BUTTON');
                for(var i = 0 ; i < btns.length ; i++) {
                    var id = btns[i].id;
                    if(reg.test(id)) {
                        btns[i].onclick = doHideShow;
                    }
                }
                var tmpBtn = document.getElementById('menu_1');
                doHideShow.apply(tmpBtn , []);
            }
           
            function doHideShow() {
                var divReg = /^menu_div_\d$/;
                var id = this.id;
                var num = id.split('_')[1];
                //显示指定的div
                var divs = document.getElementsByTagName('DIV');
                for(var i = 0 ; i < divs.length ; i++) {
                    if(divs[i].id != undefined) {
                        if(divReg.test(divs[i].id)) {
                            var tmpId = divs[i].id.split('_')[2];
                            if(num == tmpId) {
                                divs[i].style.display = 'block';
                            } else {
                                divs[i].style.display = 'none';
                            }
                        }
                    }
                }
            }
        </script>
    </head>
   
    <body>
        <div id="leftNavi">
            <div class="one_block">
               
                <button id="menu_1">分销商库存管理</button>
                <div id="menu_div_1" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)"/><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)"/>
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">分销商库存数量初始化</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">分销商库存初始化确认</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">流向单维护</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">流向单审核</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">流向单抽查</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">流向单复审</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">盘点结果维护</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">盘点结果审核</span><br />
                    </div>
                </div>
               
                <button id="menu_2">分消费管理</button>
                <div id="menu_div_2" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)" /><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)" />
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">aaaaaaaaaaa</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">bbbbbbbbbb</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">cccccccc</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">dddddddddd</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">eeeeeeeeeee</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ffffffffff</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ggggggggggg</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">hhhhhhhhhhh</span><br />
                    </div>
                </div>
           
            <button id="menu_3">结账管理</button>
                <div id="menu_div_3" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)" /><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)" />
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">aaaaaaaaaaa</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">bbbbbbbbbb</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">cccccccc</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">dddddddddd</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">eeeeeeeeeee</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ffffffffff</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ggggggggggg</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">hhhhhhhhhhh</span><br />
                    </div>
                </div>
               
                <button id="menu_4">付款结算管理</button>
                <div id="menu_div_4" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)" /><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)" />
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">aaaaaaaaaaa</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">bbbbbbbbbb</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">cccccccc</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">dddddddddd</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">eeeeeeeeeee</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ffffffffff</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ggggggggggg</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">hhhhhhhhhhh</span><br />
                    </div>
                </div>
               
                <button id="menu_5">统计报表管理</button>
                <div id="menu_div_5" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)" /><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)" />
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">aaaaaaaaaaa</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">bbbbbbbbbb</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">cccccccc</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">dddddddddd</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">eeeeeeeeeee</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ffffffffff</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ggggggggggg</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">hhhhhhhhhhh</span><br />
                    </div>
                </div>
               
                <button id="menu_6">基础数据管理</button>
                <div id="menu_div_6" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)" /><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)" />
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">aaaaaaaaaaa</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">bbbbbbbbbb</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">cccccccc</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">dddddddddd</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">eeeeeeeeeee</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ffffffffff</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ggggggggggg</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">hhhhhhhhhhh</span><br />
                    </div>
                </div>
               
                <button id="menu_7">系统管理</button>
                <div id="menu_div_7" class="menu">
                    <img src="arrowup.gif" class="upBtn" onclick="moveUp(this)" /><img src="arrowdown.gif" class="downBtn" onclick="moveDown(this)" />
                    <div class="items">
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">aaaaaaaaaaa</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">bbbbbbbbbb</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">cccccccc</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">dddddddddd</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">eeeeeeeeeee</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ffffffffff</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">ggggggggggg</span><br />
                       
                        <a href="#"><img src="admin.gif" onmouseover="makeBorder(this)" onmouseout="leaveBorder(this)"/></a><br />
                        <span class="distance">hhhhhhhhhhh</span><br />
                    </div>
                </div>
               
            </div>
        </div>
    </body>
</html>

分享到：
| hibernate基本方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    原生javascript小练习，各种属性的用法

    在这个小练习中，我们将探讨如何利用JavaScript实现动画效果、创建轮播图以及利用页面存储属性等实际应用场景。下面，我们将深入讨论这些知识点。 首先，让我们来谈谈动画效果的实现。在Web开发中，动态效果常常能...

    javascript基础练习，一些有趣的小游戏

    javascript基础练习，一些有趣的小游戏javascript基础练习，一些有趣的小游戏javascript基础练习，一些有趣的小游戏javascript基础练习，一些有趣的小游戏javascript基础练习，一些有趣的小游戏javascript基础练习，...

    JavaScript技术练习小项目

    JavaScript技术练习小项目 该项目包含JavaScript的多项技术点，可以有效练习我们的能力，提高对js的认识 JavaScript技术练习小项目 该项目包含JavaScript的多项技术点，可以有效练习我们的能力，提高对js的认识 ...

    javascript的案例demo小练习

    在"javascript的案例demo小练习"中，我们可以预期包含一系列的实例代码，旨在帮助初学者或复习者巩固JavaScript基础知识，理解如何使用JavaScript进行前端开发。这些练习可能涵盖了以下几个方面： 1. **变量与数据...

    JavaScript习题JavaScript基础练习题

    javascript，JavaScript习题JavaScript基础练习题JavaScript习题JavaScript基础练习题

    JavaScript课件及练习

    接下来，小练习部分可能涉及的实践项目可能有： 1. **简单计时器/倒计时**：用JavaScript实现一个简单的计时器或倒计时器，锻炼时间管理和日期对象的使用。 2. **动态表单验证**：通过JavaScript验证用户输入，如...

    北大青鸟javascript上机练习和课后习题

    这个压缩包文件“北大青鸟javascript上机练习和课后习题”很可能包含了丰富的学习资源，旨在通过实践来巩固理论知识。 首先，我们要了解JavaScript的基本概念。它是一种解释型、面向对象的脚本语言，主要应用于网页...

    javascript实现网页上打字练习

    javascript实现网页上打字练习

    JavaScript练习实例

    本篇文章将深入探讨JavaScript练习实例中的关键知识点，帮助读者提升JavaScript编程技能。 1. **基础语法**：JavaScript的基础包括变量声明（`var`, `let`, `const`），数据类型（如`string`, `number`, `boolean`,...

    战胜Javascript必做练习50题

    《战胜Javascript必做练习50题》是一本专注于提升Javascript编程技能的实用教程书籍。书籍通过50个精心挑选的程序实例，旨在帮助具有一定HTML和Javascript基础的读者，通过实际操作和思考题来加深理解和提升编程水平...

    javascript的小练习

    这个"javascript的小练习"资源，正如其标题所示，旨在帮助初学者熟悉并掌握JavaScript的基本概念和常用技巧。 首先，"div滚动"是网页设计中常见的效果。在HTML中，`&lt;div&gt;`是一个通用容器元素，可以用来组织页面布局...

    JavaScript-ppt及练习试题

    在“JavaScript-ppt及练习试题”中，我们可以期待深入学习JavaScript的基础概念、语法特性以及实际应用。 首先，PPT部分可能涵盖了以下知识点： 1. **JavaScript历史与概述**：讲解JavaScript的起源，其与Java的...

    网页模板——javascript 在线打字练习.zip

    【标题】"网页模板——javascript 在线打字练习"揭示了这个压缩包文件的主要内容，它是一个基于JavaScript技术实现的在线打字练习平台的网页模板。JavaScript，作为全球最广泛使用的编程语言之一，通常用于增强网页...

    JavaScript表单练习.zip

    1． 掌握JavaScript脚本的调用和基本语法； 2． 掌握JavaScript常用内置对象的基本应用； 3． 掌握BOM和window消息对话框的使用； 4． 掌握HTML DOM动态网页设计技术。

    战胜Javascript必做练习50题PDF

    "战胜JavaScript必做练习50题"提供了丰富的实践机会，帮助开发者巩固基础，提升能力。 这份PDF文档可能包含了从基础到高级的各种JavaScript题目，旨在覆盖语言的关键特性，包括但不限于变量、数据类型、运算符、...

    pink老师 JavaScript基础 简易ATM案例

    题目描述： - 里面现存有 100 块钱。 - 如果存钱，就用输入钱数加上先存的钱数, 之后弹出显示余额提示框 - 如果取钱，就减去取的钱数，之后弹出显示余额提示框 - 如果显示余额，就输出余额 ...

    老裴帮助关于Javascript动态创建表格的小练习

    标题中的“老裴帮助关于Javascript动态创建表格的小练习”指的是一个使用JavaScript编程语言来动态创建HTML表格的学习资源或教程。JavaScript是一种广泛应用于客户端Web开发的脚本语言，它允许开发者在用户与网页...

    JavaScript练习题

    JavaScript 实践题目总结 JavaScript 是一种广泛应用于 web 开发的编程语言，本文总结了 JavaScript 实践题目，涵盖函数、事件、内置对象等方面的知识点，旨在帮助初学者全面提升 JavaScript 水平。 一、函数 1. ...

    数组练习javascript-3

    数组练习javascript-3

Magicbox
Global site tag (gtag.js) - Google Analytics