1. 程式人生 > >很多人很想知道怎麼掃一掃二維碼就能開啟網站,就能新增聯絡人,就能連結wifi,今天做個demo(續集)

很多人很想知道怎麼掃一掃二維碼就能開啟網站,就能新增聯絡人,就能連結wifi,今天做個demo(續集)

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>生成二維碼</title>
    <script src="JavaScript/jquery-1.8.3.min.js"></script>
    <script src="JavaScript/jquery.qrcode.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //沒有中文就可以這麼簡單
            $('#code').qrcode("http://dnt.dkill.net");

            //普通轉換
            $("#txt_btn").click(function () {
                outputQRCod($("#inputTxt").val(), 200, 200);
            });

            //URL演示
            $("#url_btn").click(function () {
                var urlTxt = $("#inputUrl").val();
                if (urlTxt.indexOf("http://") < 0) {
                    urlTxt = 'http://' + urlTxt;
                }
                outputQRCod(urlTxt, 400, 400);
            });

            //聯絡人新增演示
            $("#people_btn").click(function () {
                var txt = "BIZCARD:N:" + $('#inputName').val() + ";T:" + $('#inputPost').val() + ";C:" + $('#inputCompany').val() + ";A:" + $('#inputAddress').val() + ";B:" + $('#inputMobile').val() + ";E:" + $('#inputEmail').val() + ";;";
                outputQRCod(txt, 400, 400);
            });

            //WiFi連線演示
            $("#wifi_btn").click(function () {
                var txt = "WIFI:T:" + $('#WiFiType').val() + ";S:" + $('#inputWiFiName').val() + ";P:" + $('#inputWiFiPass').val() + ";;";
                console.log(txt);
                outputQRCod(txt, 400, 400);
            });
        });

        //中文字元處理
        function toUtf8(str) {
            var out, i, len, c;
            out = "";
            len = str.length;
            for (i = 0; i < len; i++) {
                c = str.charCodeAt(i);
                if ((c >= 0x0001) && (c <= 0x007F)) {
                    out += str.charAt(i);
                } else if (c > 0x07FF) {
                    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                    out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                } else {
                    out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                }
            }
            return out;
        }

        //生成二維碼
        function outputQRCod(txt, width, height) {
            //先清空
            $("#code").empty();
            //中文格式轉換
            var str = toUtf8(txt);
            //生成二維碼
            $("#code").qrcode({
                render: "table",
                width: width,
                height: height,
                text: str
            });
        }

    </script>
</head>

<body>
    <div id="main">
        <div class="demo">
            <p>請輸入內容然後點選按鈕生成二維碼:</p>
            <div id="code"></div>
            <h2>演示1:</h2>
            <p>
                普通文字:<input type="text" class="input" id="inputTxt" value="">
                <input type="button" id="txt_btn" value="生成二維碼">
            </p>
            <h2>演示2:</h2>
            <p>
                URL 演示:<input type="text" class="input" id="inputUrl" value="">
                <input type="button" id="url_btn" value="生成二維碼">
            </p>
            <h2>演示3:</h2>
            <p>加聯絡人:(選填)<input type="button" id="people_btn" value="生成二維碼"></p>
            <p>
                姓名:<input type="text" class="input" id="inputName" value=""><br />
                <br />
                職位:<input type="text" class="input" id="inputPost" value=""><br />
                <br />
                公司:<input type="text" class="input" id="inputCompany" value=""><br />
                <br />
                地址:<input type="text" class="input" id="inputAddress" value=""><br />
                <br />
                手機:<input type="text" class="input" id="inputMobile" value=""><br />
                <br />
                郵箱:<input type="text" class="input" id="inputEmail" value=""><br />
                <br />
            </p>
            <h2>演示4:(現在的wifi一般都是WPA的,WEP的基本上10分鐘內就能破解了)</h2>
            <p>
                WiFi名稱:<input type="text" class="input" id="inputWiFiName" value=""><br />
                <br />
                WiFi密碼:<input type="text" class="input" id="inputWiFiPass" value=""><br />
                <br />
                WiFi型別:<select id="WiFiType"><option value="WPA">WPA/WPA2</option>
                    <option value="WEP">WEP</option>
                    <option value="nopass">無加密</option>
                </select>
                <input type="button" id="wifi_btn" value="生成二維碼">
            </p>
        </div>
    </div>
</body>
</html>

相關推薦

很多知道怎麼開啟網站新增聯絡人連結wifi今天demo續集

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>生成二維碼</title> <script src="JavaScript

很多知道怎麼開啟網站新增聯絡人連結wifi今天說下這些格式明天demo

有些功能部分手機不能使用,網站,通訊錄,wifi基本上每個手機都可以使用。 在看之前你可以掃一掃下面幾個二維碼先看看效果: 1.二維碼生成 網址 (URL) 包含網址的 二維碼生成 是大家平時最常接觸到的(例如:http://dnt.dkill.net),二維碼識別軟體能夠通過 http:/

掃描跳轉到不同下載地址

開發完了iOS平臺和安卓平臺的app 之後,需要在官網掛一個下載連結,二維碼下載是少不了了,本來想著ios 一個,android 一個,不科學啊,程式設計師怎能容忍這樣的事存在呢 如何實現掃描一個二維碼,根據不同的手機作業系統,自動跳轉到不同的下載地址呢, 思路如下,用

掃描登入原理

掃二維碼登入現在比較常見,比如微信、支付寶等 PC 端登入,並且好像每款 APP 都支援掃碼登入,不搞個掃碼登入都不好意思。作為技術人員,不知道您對這背後的實現邏輯是否敢興趣,反正我是一直都對這背後實現好奇。最近剛好看到一個關於掃碼登入原理的視訊,於是就整理出來了這篇文章,希望對您有所幫助。 本文共三個主題

PHP 微信支付TP5

PHP交流群:294088839 1.支付呼叫 require_once "./payment/wxpay/php/lib/WxPay.Api.php"; require_once "./payment/wxpay/php/example/WxPay.NativePay.php"; $n

微信公眾號介面呼叫JS-SDKvue專案為例

該方法需引入微信js-sdk ,先npm安裝 //在一個地方呼叫this.weixin()方法,比如說按鈕 //寫掃一掃方法 weixin() { var that = this; var url=''; var params =

為啥程式設計師工資高很多轉行這4點原因現實

為啥程式設計師工資高,卻很多人想轉行,這4點原因很現實 程式設計師,科技的發展產生了程式設計師這個職位。從這些年各大網際網路公司曝光的一些員工收入水平來看,程式設計師的工資還是相對比較高的,可是我們在網際網路上還聽到了另外一種聲音,很多程式設計師想轉行,特別是大齡程式設計師,這可能會令很

很多都不知道的監聽微信、支付寶等移動app及瀏覽器的返回、後退、上頁按鈕的事件方法

在實際的應用中,我們常常需要實現在移動app和瀏覽器中點選返回、後退、上一頁等按鈕實現自己的關閉頁面、調整到指定頁面或執行一些其它操作的 需求,那在程式碼中怎樣監聽當點選微信、支付寶、百度糯米、百度錢包等app的返回按鈕或者瀏覽器的上一頁或後退按鈕的事件呢。 我相信很多朋

掃描研究總結高仿微信輕鬆實現定製掃描介面

在正文之前說點題外話,加上這篇我已經寫了3篇部落格了,其實我寫部落格的初衷不是想證明自己有多牛,並且我也只是從事安卓開發只有半年時間的小渣,但是不想成為大牛的渣不是好渣,所以我想通過部落格把工作學習中遇到的問題進行研究總結,從而提高自己,與此同時如果能給廣大從事

微信開放實戰--功能

大概流程: 1.根據appId和appSecret獲取access_token(使用憑證) public static JSONObject getTokenTool(String appId,String appSecret){ String url="htt

Android超方便 整合 Zxing實現閃光燈生成圖片解析條碼等功能

之前我寫過一篇部落格是關於如何將zxing整合到Android Studio中,以及簡單的實現掃一掃功能。 詳情請看:Android Studio整合Zxing掃一掃 但是,上面那篇部落格只有有一個掃一掃功能,而且在低解析度手機上會出現變形的問題。掃描速度也

Android高仿微信/支付寶 弱光檢測自動放大功能

if (rawResult != null) { // Don't log the barcode contents for security. long end = System.currentTimeMillis(); Log.d(T

微信開發微信商品建立

微信公眾平臺開放“掃一掃”功能,同時開放相關介面供有許可權的品牌所有者呼叫。介面支援建立、管理併發布品牌所有者的商品資訊,品牌所有者可選擇商品條碼釋出。微信同時提供多種事件推送,幫助品牌所有者實現精準運營、資料分析等能力。 掃一掃介面主要呼叫流程如下:  許可權

啤酒飲品行業上有紅包對商家有什麽好處

定制 成績單 銷售 互動 執行 定制開發 佳能相機 產品 商品 如今,掃碼紅包在市場上是很火爆的,基本所有做營銷促銷類的公司或者產品都想要用掃碼應用進行去推廣,對於啤酒飲品快消行業,即使是夏日旺季,廠家早已布局促銷活動。什麽樣的促銷方式才能幫助商家賺取更多利益呢。 夏季啤酒

領紅包

掃一掃紅包系統 掃二維碼領紅包分銷 隨著互聯網的快速發展,移動互聯更是快速叠代,進而促成新一代的網絡營銷模式快速串紅。其中,引人註目的是微信商城,源於其依托於微信平臺,通過微信第三方開發公司,再加上微信分銷模式,在朋友圈快速傳播,營銷,推廣等,深受各行各業的企業喜歡。

ASP.NET MVC的微信WEBAPP中調用微信JSSDK

lis qrc 頁面 edr 唯一標識 文件夾 tty 手機攝像頭 客戶端 今天做一個項目,是在微信上用的,微信WEB APP,裏面用到了調用手機攝像頭掃一掃二維碼的功能,記得以前某個項目裏寫有的,但是找不到之前那個項目源碼了,想復制粘貼也復制不了了,只好對著微信的那個開發

這個季節吃茄子治療7種疾病很多都不知道

otto nor 也有 5.6 cal span .cn http enter 這個季節吃茄子能治療7種疾病,很多人都不知道! 2016-04-26 都市報道擴大版 茄子的功效有什麽?茄子含有維生素E,有防止出血和抗衰老功能,常吃茄子,可使血液中膽固醇水

快速優化方案介紹()--怎麽在光線不足時手機自動進行補光。

ram 平時 implement chang fill change rri ren text 二維碼掃碼已經是一個很通用的技術了,也有很多的開源項目可以實現,比如Zxing項目。https://github.com/zxing 這裏重點不是介紹Zxing中是怎麽樣來實現二

小程序開發wx.scanCode接口可以代替部分槍的工作了

小程序開發 小程序教程 小程序掃一掃 小程序掃碼 小程序scancode 小程序掃碼接口wx.scanCode挺有意思,以後會代替部分掃碼槍的工作,而且小程序掃一掃還有自己特色的功能,是掃碼槍不具備的。線下店面,或許將來不需要電腦收銀系統,直接可以使用大屏手機,就可以進行收付款,商品管理。

微信手機看遠程視頻監控直播

ima 對比 遠程 log 微信 發的 center 遠程監控 htm 眼見為實,為多幼兒園、食品安全、養殖場、交通路況、景點直播等已經安裝過監控攝像頭領域提供實時視頻、微信直播。 目前市場上監控廠商提供手機遠程監控太多了,但沒有提供微信視頻監控