Question

我的图片代表1到9，我希望当用户点击其中一个时保存数字（例如：如果用户点击的图片有1，保存数字1），但是我只需要四个数字作为密码。如何让用户只将四位数放在一个变量中？

这是我的代码：

＆＃13;

<html>
    <title>Hora</title>
    <head><link rel="stylesheet" type="text/css" href="csshora.css">
        <script type="text/javascript">
            var number;
            function changeImage(a) {
                document.getElementById("img").src=a;
            }
        </script>
    </head>

    <body>
        <div class="login">
          <img src="img/1.png" class="i-1" onclick='number('1')'/>
          <img src="img/2.png" class="i-2" />
          <img src="img/3.png" class="i-3" />
          <img src="img/4.png" class="i-4" />
          <img src="img/5.png" class="i-5" />
          <img src="img/6.png" class="i-6" />
          <img src="img/7.png" class="i-7" />
          <img src="img/8.png" class="i-8" />
          <img src="img/9.png" class="i-9" />
        </div>
    </body>
</html>

＆＃13;

Answer 1

您可以使用以下方法：

var numbers = 0;
var code = "";

function makeNumber(num)
{
  if(numbers < 4)
  {
    numbers++;
    code+=""+num;
  }
  else
  {
    alert("No more");
  }
}

function showCode()
{
  alert(code);
}

<div class="login">
  <img height="20" width="20" src="http://icdn.pro/images/en/b/l/blue-ball-icone-9872-128.png" class="i-1" onclick='makeNumber(1);'/>
  <img height="20" width="20" src="http://icons.iconseeker.com/png/fullsize/play-stop-pause/stop-normal-blue.png" class="i-2" onclick='makeNumber(2);'/>
  <img height="20" width="20" src="http://www.teconic.com/graphics/blue_ball.jpg" class="i-3" onclick='makeNumber(3);'/>
  <img height="20" width="20" src="https://bellcomputers.nz/imag/alternative.png" class="i-4" onclick='makeNumber(4);'/>
  <img height="20" width="20" src="http://www.clker.com/cliparts/G/t/K/e/5/8/blue-stop-md.png" class="i-5" onclick='makeNumber(5);'/>
  <img height="20" width="20" src="http://findicons.com/files/icons/1838/tropical_stuff/128/ball.png" class="i-6" onclick='makeNumber(6);'/>
</div>

<button onClick="showCode();">Show Code</button>

这里我们维护一个限制四个以上图像点击选择的计数器。

Answer 2

检查一下并告诉我你是否正在寻找（仅前两张图片）：

＆＃13;

<html>
    <title>Hora</title>
    <head><link rel="stylesheet" type="text/css" href="csshora.css">
        <script type="text/javascript">
            var number;
            var pass = '';
            function changeImage(a) {
                document.getElementById("img").src=a;
            }
            function createPass(e){
              if(pass.length>=4){
              }else{
                pass = pass+e;
              }
              console.log(pass);
            }
        </script>
    </head>

    <body>
        <div class="login">
            <img src="img/1.png" class="i-1" onclick='createPass("1")'/>
            <img src="img/2.png" class="i-2" onclick='createPass("2")'/>
            <img src="img/3.png" class="i-3" />
            <img src="img/4.png" class="i-4" />
            <img src="img/5.png" class="i-5" />
            <img src="img/6.png" class="i-6" />
            <img src="img/7.png" class="i-7" />
            <img src="img/8.png" class="i-8" />
            <img src="img/9.png" class="i-9" />
        </div>
    </body>
</html>

＆＃13;

Answer 3

这是一个开始的例子。

<html>
<title>Hora</title>

<head>
  <link rel="stylesheet" type="text/css" href="csshora.css">
  <script type="text/javascript">
    var number;
    var pin = "";

    function changeImage(a) {
      document.getElementById("img").src = a;
    }

    function number(v) {
      if (pin.length <= 3) {
        pin += v;
      } else
        alert('You have already entered 4 digits');
    }
  </script>
</head>

<body>
  <div class="login">
    <img src="img/1.png" class="i-1" onclick="number('1')" />
    <img src="img/2.png" class="i-2" onclick="number('2')" />
    <img src="img/3.png" class="i-3" onclick="number('3')" />
    <img src="img/4.png" class="i-4" onclick="number('4')" />
    <img src="img/5.png" class="i-5" onclick="number('5')" />
    <img src="img/6.png" class="i-6" onclick="number('6')" />
    <img src="img/7.png" class="i-7" onclick="number('7')" />
    <img src="img/8.png" class="i-8" onclick="number('8')" />
    <img src="img/9.png" class="i-9" onclick="number('9')" />
  </div>
</body>

</html>

在JavaScript中点击一个图像四个数字

3 个答案: