我正在尝试使用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。
答案 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>