有没有办法重复使用JavaScript代码而不复制，并粘贴相同的代码？

时间：2016-01-05 17:40:49

标签： javascript html css

有没有办法重复使用javascript代码而不复制，并粘贴相同的代码？我正在我的网站上工作，我遇到了一个javascript问题。我已经在c ++和汇编中完成了编码，并且有一些方法来制作子程序以便反复使用相同的代码，但我无法弄清楚如何使用javascript来实现。在我给出的代码中，我的脚本位于底部。为了使社交按钮像主题按钮一样工作，我必须复制并粘贴整个代码，并为那个按钮使用单独的css，所以我想知道是否有办法使脚本通用，所以我可以将它用于我所有的onclick按钮。我是javascript的新手，所以如果你认为我误解了一些东西请告诉我。谢谢！

（PS代码可以复制，粘贴和运行，所以你知道我在说什么。我不希望任何人通过查看和解决它，因为它是一个可怕的混乱。我只是想知道如果有方法可以重复使用我的javascript而无需每次我想制作按钮时复制和粘贴它！）

<!DOCTYPE html>
<html>
<head>
<title>ParallecScrolling</title>
<style type="text/css">

    *{
        margin: 0px;
        padding: 0px;
        font-family: "Verdana";
    }
    body{
        overflow-y: scroll;
        font-size: 18px;
    }
    #nav{
        width: 100%;
        position: fixed;
        background-color: #222;
        z-index: 1;
    }

    #nav_wrapper{
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    #nav ul{
        list-style-type: none;
        position: relative;
    }

    #nav ul li {
        display: inline-block;
    }

    #nav ul li:hover{
        background-color:#fff;
    }

    #nav ul li a,visited{
        color: #f34;
        display: block;
        padding: 15px;
        text-decoration: none;
    }

    #nav ul li a:hover{
        color: #000;
        text-decoration: none;
    }

    #nav ul li:hover ul{
        display: block;
    }

    #nav ul ul{
        display: none;
        position: absolute;
        background-color: #afafaf;
    }

    #nav ul ul li{
        display: block;
    }

    #nav li a{
        text-decoration: none;
        color: white;
        line-height: 25px;

    }

    #nav li a:hover {
        background-color: red;
    }   

    #nav ul li ul.SubjectMegaMenu{
        width:100%;
        padding:20px 0;
        background: orange;
        position:absolute;
        display: none;
    }

    #nav ul li:hover ul.SubjectMegaMenu{
        display:block;
        left: 0;
    }

    #nav ul li:hover ul.SubjectMegaMenu h1{
        padding: 10px 0;
        font-size: 20px;
        color:#000;
    }

    #nav ul li:hover ul.SubjectMegaMenu li{
        width:150px; 
        margin-right:20px;
    }

    #nav ul li:hover ul.SubjectMegaMenu li a{
        padding 10px;
    }

    #nav ul li:hover ul.SubjectMegaMenu li a:hover{
        background: #333;
    }

    #nav ul li a:active + ul.dropdown {left:-5px}
    #nav ul li a:focus + ul.d1,
    #nav ul li a:focus + ul.d2 {left:-5px}

    #image {            
        position: relative;
        z-index: -1 ;       
        height: 100vh;
        width: 100%;
    }
    #content {
        position: relative;
        height: 100vh;
        width: 100%;
        background-color:#4d5555;
    }
    #swag {
        position: relative;
        width: 100%;
        background-color:#ffffff;
    }

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

.dripbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dripbtn:hover, .dripbtn:focus {
    background-color: #3e8e41;
}

.dripdown {
    position: relative;
    display: inline-block;
}

.dripdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dripdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dripdown-content a:hover {background-color: #f1f1f1}

.show1 {display:block;}
</style>


</head>

<body>

<div id="nav">
    <div id="nav_wrapper">
        <ul>
            <li><a href='#'>Home</a></li>
                <div class="dropdown">
                <button onclick="myFunction()" id="myBtn" class="dropbtn"> Subjects &#9660;</button>
                    <div id="myDropdown" class="dropdown-content">
                        <a href='#'> Electrical Engineering </a>
                        <a href='#'> Math </a>
                        <a href='#'> Computer Science </a>
                    </div>
                </div>
                <div class="dripdown">
                <button onclick="myFunction3()" id="myiBtn" class="dripbtn"> Social &#9660;</button>
                    <div id="myDripdown" class="dripdown-content">
                        <a href='#'> Youtube </a>
                        <a href='#'> Facebook </a>
                        <a href='#'> Reddit </a>
                        <a href='#'> Twitter </a>
                    </div>
                </div>
            <li><a href='#'> About </a></li>
            <li><a href='#'> Donate </a></li>
        </ul>
    </div>
</div>

<img  src="Whale.png" id="image" />

<div id="content"></div>

<div id="footer"></div>

<script>
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

<script>
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myiBtn").onclick = function() {myFunction3()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction3() {
    document.getElementById("myDripdown").classList.toggle("show1");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dripbtn')) {

    var dropdowns = document.getElementsByClassName("dripdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show1')) {
        openDropdown.classList.remove('show1');
      }
    }
  }
}
</script>

<script>
function myFunction2() {
    var w = window.outerWidth;
    var h = window.outerHeight;
    var yourImg = document.getElementById('image');
        yourImg.height = h;
        yourImg.width = w;
}
</script>
<script type="text/javascript">
    var ypos, image;
    function parallex () {
        ypos = window.pageYOffset;
        image = document.getElementById('image');
        image.style.top = ypos * .5 + 'px';
    }
    window.addEventListener('scroll', parallex);
</script>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

给你一个想法。

<script>
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  var i;
  var dropdowns;
  var openDropdown;
  var myclass;

  if ( ! event.target.matches('.dropbtn')) {
    dropdowns = document.getElementsByClassName("dropdown-content");
    myclass = "show";
  } else if ( ! event.target.matches('.dripbtn') {
    dropdowns = document.getElementsByClassName("dripdown-content");
    myclass = "show1";
  }

  if (dropdowns != undefined) {
    for (i = 0; i < dropdowns.length; i++) {
      openDropdown = dropdowns[i];

      if (openDropdown.classList.contains(myclass)) {
        openDropdown.classList.remove(myclass);
      }
    }
  }
}

myFunction(id, myclass){
    document.getElementById(id).classList.toggle(myclass);
}

document.getElementById("myBtn").onclick = function() {
    myFunction("myDropdown", "show");
}

document.getElementById("myiBtn").onclick = function() {
    myFunction("myDripdown", "show1");
}
</script>
相关问题
最新问题