JS框架_(Qrcode.js)插件将你的内容转换成二维码格式

二维码格式演示

(扫描此二维码会自动跳转到我博客的首页O(∩_∩)O~)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qrcode.js插件将你的内容转换成二维码格式</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="lanren">
        <h1>Gary_请在下面输入框中输入内容</h1>
        <input type="text" placeholder="请在这里输入内容" id="demo">
        <button id="send">点击生成二维码</button>
           <br></br><br></br>
        <div id="qrcode"></div>
    </div>
    <p></p>
    <script src="js/qrcode.min.js"></script>
    <script>
    window.onload =function(){
        (function(){
            var defaultContent = ‘http://www.cnblogs.com/1138720556Gary/‘;
            var content = document.getElementById("qrcode");
            var qrcode = new QRCode(content,{
                width:200,
                height:200
            });
            document.getElementById("send").onclick =function(){
                var value = document.getElementById("demo").value || defaultContent;
                qrcode.makeCode(value);
                content.style.display = "block";
            }
        })();
    }
</script>
</body>
</html>

index.html

实现过程:

原文地址:https://www.cnblogs.com/1138720556Gary/p/9383358.html

时间: 2024-10-24 21:51:58

JS框架_(Qrcode.js)插件将你的内容转换成二维码格式的相关文章

利用 Python django 框架 输入汉字,数字,字符,等。。转成二维码!

利用 Python django 框架 输入汉字,数字,字符,等..转成二维码! 模块必备:Python环境 + pillow  + qrcode 模块 核心代码import qrcode qr = qrcode.QRCode( version=2, error_correction=qrcode.constants.ERROR_CORRECT_L, box_size=20, border=4, ) qr.add_data('你要生成的文件') qr.make(fit=True) img = q

C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码

本文介绍在 C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码.网上文章大多只是简单介绍内置参数的设置,根据我的使用目的,增加了自定义目标二维码图片尺寸和白边边框.有需要的朋友们可以试一下,如有bug欢迎指正. 首先,将 ThoughtWorks.QRCode.dll 放在 bin 目录后,在页面中引用: using ThoughtWorks.QRCode.Codec; 生成二维码图片: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

JS框架_(Popup.js)3D对话框窗口插件

3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content=&qu

JS框架_(jQuery.js)Tooltip弹出式按钮插件

弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>jQuery实现Tooltip弹出样式的分享按钮DEMO演示</title> <link rel="stylesheet" href="css/style.css"> </head> <body><

JS框架_(JQuery.js)绚丽的3D星空动画

绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name=

JS框架_(coolShow.js)图片旋转动画特效

coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>coolShow.js插件图片旋转动画特效</title> <link href="css/coolShow.css" rel="

JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery夜晚天空满天星星闪烁动画</title> <script src="js/jquery.min.js"></script> <style&

JS框架_(jQuery.js)文章全屏动画切换

文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="

JS框架_(JQuery.js)模拟刮奖

纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl