试图为QRcode Javascript生成一个随机数

时间:2017-03-15 22:00:16

标签: javascript html qr-code

我正在尝试使用QRcode api网站(http://goqr.me/api/)生成QRcode。为了生成随机QRcode,我需要一个随机数,现在这就是我所拥有的:

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Gerar QRcode</button>

<p id="demo"></p>

<script>
function myFunction() {
var x = Math.floor((Math.random() * 99) + 1);
document.getElementById("demo").innerHTML = x;
}
</script>
<img src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=demo">
</body>
</html>

它生成一个随机数,但它没有到达应有的位置(在数据= 数字 之后)

任何人都可以帮助我吗?或者引导我去做我想做的最好的方式。

编辑:当我按下按钮&#34; Gerar QRcode&#34;时,我想要一个新的QRcode。

3 个答案:

答案 0 :(得分:2)

由于您已经在使用内联脚本,因此以下内容可能是合适的:

<script>
var x = Math.floor((Math.random() * 99) + 1);
document.write("<img src='https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x + "'>")
</script>

因此,您发布的示例页面如下所示:

<!DOCTYPE html>
<html>
<body>    
<script>
    var x = Math.floor((Math.random() * 99) + 1);
    document.write("<img src='https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x + "'>")
</script>

</body>
</html>

编辑:

要在按钮点击时显示新的QR码(如评论中所述),您需要将图片的src更改为新网址。为此,您还需要一种方法来唯一选择要修改的图像 - 最简单的方法是在图像标记上使用ID并将URL创建移动到函数中。

这与Caleb Mbakwe在答案中的表现非常相似:

<!DOCTYPE html>
<html>
  <body>
    <img id='qrcode' src=''>
    <button onclick="newQR()">Gerar QRcode</button>
    <script>
      function newQR() {
        var x = Math.floor((Math.random() * 99) + 1);
        document.getElementById('qrcode').src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + x
      }
      newQR()
    </script>
  </body>
</html>

如果你只是想让它用于测试API,那么这应该没问题。否则,请阅读Unobtrusive Javascript以清理代码。此外,在javascript中创建img标记然后将其插入页面可能是一个更清洁,更长期的解决方案。

答案 1 :(得分:1)

从api文档中,QR码是您请求的数据字段的内容,因此,如果您在浏览器中访问网址https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=demo,您将看到内容为“demo”的QR码

您需要做的是将您的随机数连接到图像源中的相同字段。

这样的东西就足够了:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="100">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="20"
        android:weightSum="100">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent" 
            android:layout_weight="75"
            android:text="Button"/>
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="25"
            android:text="Button"/> 
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="20"
        android:weightSum="100">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="75"
            android:text="Button"/>
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="25"
            android:text="Button"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="20"
        android:weightSum="100">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="75"
            android:text="Button"/>
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="25"
            android:text="Button"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="20"
        android:weightSum="100">
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="75"
            android:text="Button"/>
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="25"
            android:text="Button"/>
    </LinearLayout>
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="20"
        android:text="Button"/>

</LinearLayout>

答案 2 :(得分:0)

一种解决方案是从脚本生成URL。

<script>
  function myFunction() {   
    var url = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=";
    var x = Math.floor((Math.random() * 99) + 1);
    url = url + x;
    document.getElementById("demo").src = url;
  }
</script>
<img id="demo" src="">
</body>
</html>