点击识别元素位置、生成显示二维码、下载二维码

　　百度网盘地址

效果：

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="style.css" /></head><body><table class="tablesorter" cellspacing="0"><thead><tr><th class="header w60"></th><th class="header w60">ID</th><th class="header w100">图片</th><th class="header">商品名称</th><th class="header w150">货号</th><th class="header w120">店铺分类</th><th class="header w100">销售价</th><th class="header w100">库存</th><th class="header w100">状态</th><th class="header w60">排序</th><th class="header w150">操作</th></tr></thead><tbody><tr><td><input name="id[]" type="checkbox" value="8256"></td><td>8256</td><td style="text-align: center"><img src="data:images/index.jpg" class="ico"></td><td class="product_name" onclick="show_ma(8256,this)"><img class="operator" src="data:images/ma.png">22342341</td><td></td><td></td><td>3.00</td><td>123323</td><td class="green">上架</td><td><input class="tiny" type="text" value="99"></td><td class="tc"><a class="btn btn-del" href="">删除</a><a class="btn btn-edit" href="">编辑</a></td></tr><tr><td><input name="id[]" type="checkbox" value="8253"></td><td>8253</td><td style="text-align: center"><img src="data:images/index.jpg" class="ico"></td><td class="product_name" onclick="show_ma(8253,this)" ><img class="operator" src="data:images/ma.png">11111111</td><td></td><td></td><td>4.00</td><td>4</td><td class="green">上架</td><td><input class="tiny" type="text" value="99"></td>                         <td class="tc"><a class="btn btn-del" href="">删除</a><a class="btn btn-edit" href="">编辑</a></td></tr><tr><td><input name="id[]" type="checkbox" value="8252"></td><td>8252</td><td style="text-align: center"><img src="data:images/index.jpg" class="ico"></td><td class="product_name" onclick="show_ma(8252,this)"><img class="operator" src="data:images/ma.png">1123123</td><td>SD150777561760</td><td></td><td>3.00</td><td>1</td><td class="red">下架</td><td><input class="tiny" type="text" value="99"></td><td class="tc"><a class="btn btn-del" href="">删除</a><a class="btn btn-edit" href="">编辑</a></td></tr><tr><td><input name="id[]" type="checkbox" value="6045"></td><td>6045</td><td style="text-align: center"><img src="data:images/index.jpg" class="ico"></td><td class="product_name" onclick="show_ma(6045,this)"><img class="operator" src="data:images/ma.png">啦啦啦</td><td></td><td></td><td>11.00</td><td>11</td><td class="green">上架</td><td><input class="tiny" type="text" value="99"></td><td class="tc"><a class="btn btn-del" href="">删除</a><a class="btn btn-edit" href="">编辑</a></td></tr></tbody></table><div id="code_box"><div id="qrcode"></div><button class="download">下载图片</button><button class="close">关闭</button></div><script type='text/javascript' src="js/jquery.js"></script><script type='text/javascript' src="js/qrcode.js"></script><script type="text/javascript">//生成并显示二维码function show_ma (proid,o) {var oTop = parseInt($(o).offset().top) + parseInt($(o).height())+12;var oLeft = parseInt($(o).offset().left);//console.log(oTop);
                $("#code_box").css({"top":oTop,'left':oLeft});document.getElementById("qrcode").innerHTML='';        //清空二维码var qrcode = new QRCode(document.getElementById("qrcode"), {width : 200,height : 200});qrcode.clear();qrcode.makeCode("http://qrcode.51urmaker.com/productdetail?farmId=85&productId="+proid);//document.getElementById("qrcode").style.display='';
            }//隐藏二维码盒子function hide_ma () {$("#code_box").css({"top":'-9999px'});document.getElementById("qrcode").innerHTML='';//document.getElementById("qrcode").style.display='none';
            }//下载图片function downloadImage() {var imgSrc = $("#qrcode img").attr("src");var a = $("<a></a>").attr("href", imgSrc).attr("download", "img.png").appendTo("body");a[0].click();a.remove();}$("#code_box .close").click(function(){hide_ma();});$("#code_box .download").click(function(){downloadImage();})</script></body>
</html>

用插件生成的二维码。

转载于:https://www.cnblogs.com/LChenglong/p/7689564.html

点击识别元素位置、生成显示二维码、下载二维码相关推荐

vue-生成二维码+下载二维码
<div class="img" ref="code"><qrcode-vue :value="link" size=&q ...
原生css页面滑动到指定位置开始动画_html/css 滚动到元素位置，显示加载动画
每次滚动到元素时,都显示加载动画,如何添加? 元素添加初始参数以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部. 添加初始数据,默认透明度0.左右分别移动100px.//左侧容器 .ite ...
K_A12_007 基于STM32等单片机驱动AS608光学指纹识别模块 OLED0.96显示
K_A12_007 基于STM32等单片机驱动AS608光学指纹识别模块 OLED0.96显示一.资源说明二.基本参数参数引脚说明三.驱动说明对应程序: 四.部分代码说明 1.接线引脚定义 ...
可视化工具gephi源码探秘(二)---导入netbeans
在上篇<可视化工具gephi源码探秘(一)>中主要介绍了如何将gephi的源码导入myeclipse中遇到的一些问题,此篇接着上篇而来,主要讲解当下通过myeclipse导入gephi源码 ...
二维码和app扫码下载
文章目录二维码基本原理二级码生成在线二维码生成 java代码生成二维码前端二维码生成 app扫码下载二维码基本原理参考: https://cli.im/help/48235 二维条码是指在 ...
编写程序，生成一种贯穿10*10字符数组（初始时全为字符'.'）的“随机步法”。程序必须随机地从一个元素“走到”另一个元素，每次都向上、向下、向左或向右移动一个元素位置
编写程序,生成一种贯穿10*10字符数组(初始时全为字符'.')的"随机步法".程序必须随机地从一个元素"走到"另一个元素,每次都向上.向下.向左或向右移动一个 ...
扫码打开微信位置信息界面、微信定位(发送位置)生成二维码解决方案
最近遇到几个文字位置无法直接在导航软件查找定位的事情,很郁闷,就在想现在二维码时代了,居然还不能扫码实现导航吗? 于是用各导航软件研究了一下,发现导航软件是可以扫码导航的,但是只能针对他自己的链接有用 ...
Java黑皮书课后题第8章：*8.13（定位最大的元素）编写下面的方法，返回二维数组中最大元素的位置。返回值是包含两个元素的一维数组，这两个元素表示二维数组中最大元素的行下标和列下标
*8.13(定位最大的元素)编写下面的方法,返回二维数组中最大元素的位置.返回值是包含两个元素的一维数组,这两个元素表示二维数组中最大元素的行下标和列下标题目题目描述与运行示例破题代码题目 ...
JS生成二维码以及点击下载二维码
JS生成二维码效果扫描二维码可访问指定链接或当前网站链接,内容可以自己更改 "复制链接",点击按钮复制当前网站链接如何获取当前网站链接源码 textarea{opacity ...

点击识别元素位置、生成显示二维码、下载二维码

点击识别元素位置、生成显示二维码、下载二维码相关推荐

最新文章

热门文章