原生js生成二维码的例子?
时间: 2023-02-21 08:22:31 浏览: 64
以下是使用原生 JavaScript 生成二维码的简单例子:
```
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 生成二维码</title>
</head>
<body>
<div id="qrcode"></div>
<script src="https://cdn.jsdelivr.net/npm/qrcode@0.17.0/build/qrcode.min.js"></script>
<script>
new QRCode(document.getElementById("qrcode"), "https://www.example.com");
</script>
</body>
</html>
```
在上面的代码中,我们使用了 QRCode.js 这个库来生成二维码。通过使用 `new QRCode` 构造函数并将它的参数分别设置为目标元素和要生成二维码的内容,我们就可以在页面中生成二维码了。
请注意,这仅是一个简单的例子,您可以根据需要调整和扩展代码以实现更多功能。
相关问题
jquery生成二维码
要 jQuery 生成二维码,您需要引入一个叫做 `qrcodejs` 的库。您可以从以下地址下载:
https://github.com/davidshimjs/qrcodejs
下载后,将 `qrcode.min.js` 文件添加到您的项目中,并在 HTML 页面中引入它:
```html
<script src="path/to/qrcode.min.js"></script>
```
然后,在您的 JavaScript 代码中,您可以使用以下代码生成二维码:
```javascript
$(document).ready(function() {
// 获取二维码容器
var qrcodeContainer = $('#qrcode');
// 创建 QRCode 实例
var qrcode = new QRCode(qrcodeContainer.get(0), {
width: 200,
height: 200
});
// 设置二维码内容
qrcode.makeCode("https://www.example.com");
});
```
这里,我们首先获取了一个 `id` 为 `qrcode` 的容器元素,然后创建了一个 `QRCode` 实例,并将其绑定到这个容器上。接下来,我们使用 `makeCode` 方法设置二维码的内容。
请注意,这里使用了 jQuery 的 `$` 函数来获取元素,如果您不熟悉 jQuery,可以使用原生的 JavaScript 来获取元素,例如:
```javascript
var qrcodeContainer = document.querySelector('#qrcode');
```
原生js如何实现保存功能?
原生JS可以使用浏览器自带的localStorage或sessionStorage对象来实现保存功能。
1. 使用localStorage保存数据:
localStorage.setItem(key, value):将value存储到key中。
localStorage.getItem(key):获取key存储的value。
localStorage.removeItem(key):删除key存储的value。
localStorage.clear():清空localStorage中的所有数据。
示例:
```javascript
//保存数据
localStorage.setItem("username", "张三");
localStorage.setItem("age", "18");
//获取数据
var username = localStorage.getItem("username");
var age = localStorage.getItem("age");
//删除数据
localStorage.removeItem("age");
//清空所有数据
localStorage.clear();
```
2. 使用sessionStorage保存数据:
sessionStorage的使用方法与localStorage相同,但它只会在当前会话中保存数据,当会话结束时数据也会被清除。
示例:
```javascript
//保存数据
sessionStorage.setItem("username", "张三");
sessionStorage.setItem("age", "18");
//获取数据
var username = sessionStorage.getItem("username");
var age = sessionStorage.getItem("age");
//删除数据
sessionStorage.removeItem("age");
//清空所有数据
sessionStorage.clear();
```