HTML利用当前网页地址生成二维码

news/2024/7/11 0:14:49 标签: 前端, javascript, html, jquery

二维码分享扫描后进入对应网址 可以说非常的方便 今天就带大家看一种实现思路

首先,这个功能需要一个引入js依赖文件
大家可以直接下载我上传的资源
下载资源
在这里插入图片描述
下载后在html中引入这个 qrcode.js

html"><script type="text/html" title=javascript>javascript" src="./js/qrcode.js"></script>

注意文件路径啊 不要直接无脑复制了

然后我们可以在页面中定义接受二维码的元素

html"><div class = "view"></div>

然后我们在下面编写生成js的代码

html"><script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
  $('.view').qrcode({
     render: 'canvas',
      width: 90,
      height: 90,
      text:"https://www.baidu.com/?tn=48021271_25_hao_pg"
  });
</script>

然后打开html文件
在这里插入图片描述
二维码就出来了
然后我们用手机的微信扫一下它
在这里插入图片描述
没有什么问题 我们放到这个https://www.baidu.com/?tn=48021271_25_hao_pg就是百度的网址


http://www.niftyadmin.cn/n/1038273.html

相关文章

浅谈二进制文件读写和文本文件读写的区别

昨天在看一篇文章的时候&#xff0c;突然想起了这个基础性的问题&#xff0c;自己一直对它的区别不是很清楚&#xff0c;于是今天上午研究下了&#xff0c;分享下自己的理解。(对它很清楚的同学们可以略过此篇文章) 从存储方式来说&#xff0c;文件在磁盘上的存储方式都是…

iconfont创建前端图标库

在百度官网中搜索iconfont官网点击进入 首先你需要用注册登录 然后在右上角输入框中选择你想找的图标 选择自己喜欢的图标加入购物车 点击右上角购物车 你可以选择加入已有的项目或者新创建一个项目 进入资源管理下的我的项目 将图标下载到本地并解压 将iconfont.css icon…

Vue的优势

1 Vue是一个轻量级框架 只关注视图层&#xff0c;是一个整理数据的视图集合 2 Vue是中国的国产框架 官方的中文文档更加全面 3 Vue将数据与视图分开处理&#xff0c;使数据修改更加简洁&#xff0c;只需要修改数据就能完成相关操作 4 数据响应减少了原生DOM操作对性能的危害&am…

深入剖析指针传参——入门篇

前段时间在刚开始学习链表时&#xff0c;可能是因为自己不怎么理解链表的缘故吧&#xff0c;当自己把单链表&#xff0c;双链表&#xff0c;循环链表等等初始化的代码写出来了之后&#xff0c;就以为自己已经掌握链表了&#xff0c;可是前两天暴露出来的问题让我发现&#xff0…

Vue项目注入WebSocket,你所见的微信聊天不过如此

微信 QQ这样平凡处于生活中的应用工具离我们距离很近&#xff0c;就想他们在生活中一样接近 那么我们就来看看年轻的WebSocket 首先要在node中引入 npm install nodejs-websocket --save之后我们在组件中调用即可 data(){return{ws:null,}},created () {this.ws new WebSo…

Vue基础整理之路由二次封装

Vue路由的坑我可是踩了不少&#xff0c;那么我们就来看看小萌新的路由二次封装吧 封装路由首先我们要引入vue的路由 npm install vue-router --save之后我们创建router.js 编写代码在router.js中编写 import Vue from vue import routes from ./routes import Router from vu…

字符串处理strlen函数需要注意的一些小细节问题

首先&#xff0c;strlen函数的原型是 extern unsigned int strlen(char *s&#xff09;;在Visual C 6.0中&#xff0c;原型为size_t strlen(const char *string); &#xff0c;其中size_t实际上是unsigned int&#xff0c;在VC6.0中可以看到这样的代码&#xff1a;typedef unsi…

Vue基础整理之前置钩子 后置钩子

其实非常简单 在router.js中加入router.beforeEach和router.afterEach 函数就好了 代码如下 import Vue from vue import routes from ./routes import Router from vue-router Vue.use(Router) const router new Router({mode: history,routes: routes })//路由前置守卫相关…