zoukankan      html  css  js  c++  java
  • 一个简单的例子,实现两个值交替弹出

    我的业务需求是这样:当隐藏内容是显示状态时传1个值给后台,非显示状态时显示另一个值给后台,这样就有了下面这个交替弹出不同值的例子。

    例1:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8     <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
     9 </head>
    10 <body>
    11     <div id="open_close">
    12         <!-- js 控制 展开 隐藏div -->
    13         <img width="20px" style="border:1px solid red;cursor:pointer" src="https://www.cnblogs.com/images/cnblogs_com/heyiming/947284/t_helpbot.png"
    14             onclick="give_types(this)">
    15         <!--this 指 img 对象 -->
    16         <div id="hide_contents" style="border:1px solid #ccc; 300px; height:200px; display: block;">
    17             我是隐藏的那些值
    18         </div>
    19     </div>
    20     <script type="text/javascript">
    21         //简单,复杂类型值交替传到后台
    22         var i = 0;
    23 
    24         function give_types(obj) {
    25             var k = 0;
    26             i++;
    27             if (i % 2 == 0) {
    28                 k = 2;
    29             } else {
    30                 k = 1;
    31             }
    32             alert(k);
    33             var div_types = document.getElementById("hide_contents");
    34             if (div_types.style.display == "block") {
    35                 div_types.style.display = "none";
    36                 obj.src = "https://www.cnblogs.com/images/cnblogs_com/heyiming/947284/t_up.png";
    37             } else {
    38                 div_types.style.display = "block";
    39                 obj.src = "https://www.cnblogs.com/images/cnblogs_com/heyiming/947284/t_helpbot.png";
    40             }
    41         }
    42     </script>
    43 </body>
    44 </html>

    例2:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8 </head>
     9 <body>
    10     <input type="hidden" id="num" value="0" />
    11     <!--隐藏的input用来获取判断的值-->
    12     <input type="button" onclick='click_val()' value="点击"/>
    13     <script type="text/javascript">
    14         function click_val() {
    15             var hidden_val = $("#num").val(); //获取隐藏的input的值
    16             if (hidden_val == 1) { //如果是1
    17                 num = 1; //num赋值1
    18                 $("#num").val(0); //将取隐藏的input的值改为0
    19             } else { //如果不是1
    20                 num = 0; //num赋值0
    21                 $("#num").val(1); //将取隐藏的input的值改为1
    22             }
    23             alert(num); //弹出num
    24         }
    25     </script>
    26 </body>
    27 </html>

    (点击之后,交替弹出0,1)

    例3:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>交替弹出</title>
     8 </head>
     9 <body>
    10     <input type="button" onclick='myClick()' value="点击" />
    11     <script type="text/javascript">
    12         var i = 0;
    13         function myClick() {
    14             var k = 0;
    15             i++;
    16             if (i % 2 == 0) {
    17                 k = 2;
    18             } else {
    19                 k = 1;
    20             }
    21             alert(k);
    22         }
    23     </script>
    24 </body>
    25 </html>

    (点击后,交替弹出1,2)

  • 相关阅读:
    EasyUI Datagrid换页不清出勾选方法
    【HDOJ】4902 Nice boat
    【HDOJ】1688 Sightseeing
    【HDOJ】3584 Cube
    【POJ】2155 Matrix
    【HDOJ】4109 Instrction Arrangement
    【HDOJ】3592 World Exhibition
    【POJ】2117 Electricity
    【HDOJ】4612 Warm up
    【HDOJ】2888 Check Corners
  • 原文地址:https://www.cnblogs.com/heyiming/p/9871032.html
Copyright © 2011-2022 走看看