-
本版专家分：0结帖率 100% -
因为我是纯小白，就再啰嗦一下，恳请各位大师指点。。
具体是这样，我想在商品详情页写个“”手机分享“。用户点击后就在原页面上边打开一个没有地址栏的小窗口，小窗口里就显示出这个页面的二维码了。二维码的方案我已经找到了，就是如何打开小窗口和如何传递变量一点都不懂。
只要小窗口的地址是这个就可以显示出二维码了“”http://qr.liantu.com/api.php?text=http://abc.com/wapdetail?product_id=888“，关键的问题是，这里边的888是个变量，它的值等于原商品详情页地址栏中的id值，原商品详情页的地址是这样的“http://abc.com/productd?product_id=888”。
哪位小哥哥可以给我一段完整代码呢？
另外，假设我想把这个二维码直接显示在原商品详情页上边，就不用点击了，这样不知是否可行。若可行也请大师指点。
非常感谢！
问题点数：200分
-
本版专家分：2437
-
- 黄花 2018年8月 Web 开发大版内专家分月排行榜第二
-
-
本版专家分：30347 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>_</title>
</head>
<body>
<button type="button" id="btnShare">手机分享</button>
</body>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btnShare");
btn.onclick = function(){
var src = "http://qr.liantu.com/api.php?text=http://abc.com/wapdetail?product_id=888";
var div = document.createElement("div");
div.style.cssText = "position:absolute; width:300px; height:300px; left:50%; top:50%; margin:-150px 0 0 -150px;";
div.innerHTML = "<img src='" + src + "' title='点击关闭'/>";
document.body.appendChild(div);
div.onclick = function(){
document.body.removeChild(div);
};
};
};
</script>
</html>
-
本版专家分：0
-
基本上好用，只是还要做一点微调。
我的确是非常非常小白的了，我可不是像你们一样的程序猿，我是做业务的。。。买了美橙的商城系统，但是有些功能没有我又非常想用，公司又没有程序员，只能自己一点点学习了。。。。。
还有一个问题，提取动态ID并传递这个怎么解决啊？请老师赐教。
还有这个发帖的验证码，太难识别了。。。。
-
本版专家分：0
-
还有。其实我这段代码是插入到现成的商品详情页中的一段。为何单独页面就好用，插入到详情页中间就不好用了呢？点击后什么都没有的。会不会是详情页中的其他代码对此有干扰呢？在我的网站中，是作为一个“高级代码“的控件插入的，这段代码就是高级代码的内容。
-
本版专家分：0
-
嗯，明白了。是被商品详情给压到下边了，正考虑如何让它在最上层显示呢。。。。。另外也没有看到关闭的开关，明明是看到代码里边有，可是页面上是没有的。。。。可是，还有传递每个详情页的动态id的问题该怎么解决呢？请帮忙。。。
-
本版专家分：30347
-
要看这个系统有没有id这个标签可用，要是没有就要自已改后台代码了
-
本版专家分：0
-
有的，每个商品详情页都有这个标签的。详情页的地址是这样的：http://www.abc.com/productd?product_id=888，那个888就是id。因为这个商城是那种SAAS方式交付的网站，我们只能插入一段高级代码，没有办法改后台的代码。自己添加的这个显示二维码的插件只能从当前页面的地址栏中取id值。
-
本版专家分：0
-
刚才在网上四处找，最后插入的代码是这样的：
<body>
<button type="button" id="btnShare">手机分享</button>
</body>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btnShare");
btn.onclick = function(){
var src = "http://qr.liantu.com/api.php?text=http://www.abc.com/wapdetail?product_id=888";
var div = document.createElement("div");
div.style.cssText = "position:absolute; width:300px; height:300px; left:50%; top:50%; margin:-150px 0 0 -150px;";
div.style.zIndex = 999999
div.innerHTML = "<img src='" + src + "' title='点击关闭'/>";
document.body.appendChild(div);
div.onclick = function(){
document.body.removeChild(div);
};
};
};
</script>
现在就是想把那个888换成地址栏中的id值，每个详情页都有独立的id，二维码也是不同的，可是不知如何处理。
-
本版专家分：30347
-
<button type="button" id="btnShare">手机分享</button>
<script type="text/javascript">
function share_on_click(){
var btn = document.getElementById("btnShare");
var url = window.location.href;
var reg = /product_id=(\d+)/i;
var id = 888;
if(reg.test(url)){
id = RegExp.$1;
}
btn.onclick = function(){
var src = "http://qr.liantu.com/api.php?text=http://abc.com/wapdetail?product_id=" + id;
var div = document.createElement("div");
div.style.cssText = "position:absolute; width:300px; height:300px; left:50%; top:50%; margin:-150px 0 0 -150px;z-index:999";
div.innerHTML = "<img src='" + src + "' title='点击关闭'/>";
document.body.appendChild(div);
btn.style.display = "none";
div.onclick = function(){
btn.style.display = "block";
document.body.removeChild(div);
};
};
}
if(document.addEventListener){
window.addEventListener('load', share_on_click, false);
}else{
window.attachEvent('onload', share_on_click);
}
</script>
-
本版专家分：0
-
非常非常感谢！我是直接把代码帖进去了，完全可以直接用。只是还没有解决那个id取值和传递的问题。我不太懂代码，但是看了您里边有一句var id = 888，而其实这个888是个变量的。这个商品是888，下一个商品就不知道是什么了，这个数值可以在本页面的地址栏中获得的。可是如何把这个值取出来再放进那个弹出层的地址里边呢呢？
-
本版专家分：30347
-
这个是默认的，下面几行代码就是从url里取id值的
-
本版专家分：0
-
哇，是啊，完全好用！非常非常感谢！
- 其他相关推荐
- 商品详情页显示商品的详细信息
- 想要做出来这样的效果： 就是做出来这样的单选框效果的，这样看着比较帅，当时刚接触ECshop，满以为还得改代码，弄了一下午，最后经过别人的指点，在后台就可以轻易的改动，不废话了，直接上图： 点击属性列表后添加相应的属性，添加后点击商品列表，如下图： 清下缓存，看看这个效果是不是出来了。
- 【项目实战】---商品详情页的制作
- 在前面的博文中，小编分别简单的介绍了邮件的发送以及邮件的激活，逛淘宝的小伙伴都有这样的体会，比如在搜索框中输入连衣裙这个商品的时候，会出现多种多样各种款式的连衣裙，连衣裙的信息包括价格，多少人购买，商品的名称等等，但是这些信息不够详情，我们需要了解更多的关于连衣裙的详情，点击某个商品，跳转页面，查看连衣裙的详情，以前小编逛淘宝的时候，从来都没有想过这个功能是如何实现，只知道一个劲儿的在那儿逛，小编
- 小程序客服消息--查看商品详情页。 页面提示【页面不存在】
- 1.bug如下面图所示：a、点击小程序客服消息b、点击客服发给我们的消息c、点击客服发给我们的商品链接d、提示页面不存在2.所写代码：html部分js部分3.解决方法：去掉pages/detail后，就可以正常访问了4.解决思路（一般页面不存在大部分是路径问题）：打印出contactHandle方法里面的参数：当传送过去的路径有page/detail时：打印出的结果：所以把pages/detail...
- 商品浏览系统之商品详细信息显示页面实现
- 一 代码 page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %> page import="entity.Items"%> page import="dao.ItemsDAO"%> String path = request.getContextPath()
- 商品详情页面点击跳转到购物车（一）详情界面
- //依赖 compile 'com.squareup.okhttp3:okhttp:3.9.0' compile 'com.google.code.gson:gson:2.8.2' compile 'com.github.bumptech.glide:glide:3.7.0' compile 'com.squareup.okhttp3:logging-intercept
- 商品详情页中，当鼠标放到小图上时，改变大图的图片为当前小图的图片
- 在做商品详情页时，我们会遇到这样的问题，当鼠标移动到小图上的时候，所对应的大图也会随之改变，变成当前鼠标所在位置的小图图片，今天我给大家分享一下我的做法，希望对大家有所帮助，也希望得到大家的指点. //首先引入jq文件，我用的是tp框架，jq文件是放在根目录Public文件夹下的 //首先给小图绑定 mouseover 事件 $('#J_SmallImgs img').mou
- 微信小程序商品详情页交互源码（选择商品类型切换、预览商品图片）
- 源码详情请查看博客：http://blog.csdn.net/dknightl/article/details/77368969
- 用js原生加jquery实现下拉跳转至商品详情页，上拉回到商品简介
- 在做一个商城的项目时，做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片，上拉回到商品简介的效果，并且需要用户在滑动时有一种费力的感觉。最初是通过iscroll插件实现的，但这个插件在使用时有太多坑儿，总是下面会出现大片空白，还找不到是哪里的问题。 这里用了js原生事件，核心是移动端的touchstart,touchmove,touchend三个事件，判断相对位移来绑定相应的事件。
- 列表页点击商品跳转到对应商品的详情页
- 第一步： 新建dome1.html列表页 通过jq的each遍历，res.books是要遍历的数据， each处理json数据，这个each就有更厉害了，能循环每一个属性 var obj = { one:1, two:2, three:3}; each(obj, function(key, val) { alert(key); alert(val); }); 这里
- 商品详情页面,点击按钮将对应的商品加入购物车
- 商品详情页面是通过 点击首页的商品,传当前商品的信息到商品详情页面展示, 点击 加入购物车的按钮 将当前商品加入到购物车里 这是首页的商品展示 点击商品 跳转到商品详情页面 商品详情页面的布局 xmln
- 商品详情页面属性价格显示其对应价格
- ecshop默认的商品属性显示的是加多少钱 第一步：在lib_goods.php中找到 function get_goods_properties 方法 将下面的get_goods_properties方法覆盖掉原来的get_goods_properties方法 /** * 获得商品的属性和规格 * * @access public * @param
- t当前页面弹出小页面窗口
- //页面名称personal.html//窗口宽高width=200,height=200window.open("personal.html","","width=200,height=200")
- 商城项目实战32：商品详情页实现
- 1. 需要做的事情 l 商品详情页实现 1、商品查询服务事项 2、商品详情展示 3、添加缓存 2. 实现商品详情页功能 2.1. 功能分析 1、Taotao-portal接收页面请求，接收到商品id。 2、调用taotao-rest提供的商品详情的服务，把商品id作为参数传递给服务。接收到商品详细。 3、渲染结果，展示商品详细页面 4、为了提高响应速度，商品详
- 商品详情页与购物车实现
- Android实现商品详情页面和购物车页面及逻辑判断，相信能帮到你！
- 淘淘商城系列——实现商品详情页面展示
- 我相信大家通过上文的学习已经搭建好了商品详情页面展示工程，本文我将带领大家一起实现商品详情页面展示。 首先我们来看一下商品详情页面代码，可以看到商品一般属性在TbItem实体类中都是存在的，只是图片需要特殊处理，因为TbItem实体类中图片的字段存储的是以”,”分隔的图片地址的字符串，因此要将字符串转换成数组才行，而TbItem实体类中是没有images属性的，这就需要我们再新建一个pojo类，该
- h5缓存 和 点击商品列表进入详情页点击返回按钮回到上次打开列表的位置
- 最近几天能研究了一下客户端的缓存以及cookie的用法。 客户端缓存我个人选用一种就是在头部添加cache-control：max-age=(时间)秒，首先是在html的meta标签中添加但是在浏览器中查看到没有起作用，通过检查发现这个页面由于不是静态页面是通过后台数据返回的动态页面所以在meta中添加不起作用。后面与后台沟通让他们加上在浏览器中可以看到如下图： 缓存添加成功。
- Jsp动态网站初步项目 --简单的商品浏览页面 （商品详情页面details.jsp）
- <% String path = req
- 手把手做一个JSP入门程序（六）：获取单一商品详情（JSP）
- 实现对每个商品的细节详细显示的页面。
- 微信小程序商品到详情
- 微信小程序商品到详情
- Ecshop 2.7.1 B2B2C 小京东 商城网站 商品详情页二维码显示出错
- ecshop开发中商品详情页二维码显示问题
- 仿京东商品详情页（配合购物车使用）
- ：使用mvp请求OK来请求网络，在此展示mvp简单使用 一.商品详情页的activity代码 package com.bwie.skn.moni.recyclerDetails; import android.content.Intent; import android.os.Bundle; import android.support.v4.view.ViewPager; impo
- 仿淘宝的详情页图片切换
- 鼠标放在小图片上，上面的大图会切换到相应的图片html代码：css代码：js代码：
- 第七章 Web开发实战2——商品详情页
- 本章以京东商品详情页为例，京东商品详情页虽然仅是单个页面，但是其数据聚合源是非常多的，除了一些实时性要求比较高的如价格、库存、服务支持等通过AJAX异步加载加载之外，其他的数据都是在后端做数据聚合然后拼装网页模板的。 http://item.jd.com/1217499.html 如图所示，商品页主要包括商品基本信息（基本信息、图片列表、颜色/尺码关系、扩展属性、规格参数、包装清
- 电商App如何让用户直接打开商品详情页
- 俗话说“酒香不怕巷子深”，但再香的酒没人知道，也是浪费。做电商，产品再好没人用，也是徒劳无功，所以就需要各种手段来提高APP的活跃度和下载量。 首先从运营的角度来说，通常的手段有：1.初期的种子用户寻找在产品的冷初期阶段需要种子用户，这一批用户维护的好后期会成为核心用户，是口碑最好的宣传者。2.场景化的活动运营除了节假日必备的活动，还要准备日常的活动，提高用户粘性，活跃用户。可以通过签到、登录、积...
- javaWeb购物商城设计---商品详情显示
- 商品列表显示见：http://blog.csdn.net/u013948010/article/details/78675164 主页面显示商品列表，单击图片进入商品详情:商品详情数据库表tb_goods： 建立goodsDetail.jsp页面访问数据库获取商品根据页面跳转传递的商品ID访问数据库获得商品详情。<
- jq+ajax请求本地数据加载商品列表页并跳转详情页
- 效果：json文件：{ "books":[ {"id":1,"imgUrl":"images/ly.jpg","price":"45.00","title":"论语","publish":"人民文学出版社","num":"303","desc":"崇贤馆始置唐代太宗朝。1999年，李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化，提供全新国学体验馆为宏愿。"},
- 京东商城用来展示产品代码
- /*jqueryzoom&&jcarousel*/(function($){$.fn.jqueryzoom=function(options){var settings={xzoom:200,yzoom:200,offset:10,position:"right",lens:1,preload:1};if(options){$.extend(settings,options);}v...
- 微信小程序——点击商品分类跳转到该商品的商品详情页面（已实现）
- 首先，我不得不感慨下，慕课网上“7七月”老师的课真的很强大，此处放链接https://coding.imooc.com/learn/list/75.html。 我只是学习到了一半就开始自己尝试做一个商城的小程序，竟然真的被我完成了大部分。好吧，就这样，这个课明明还有一半，我竟然不听了…… 也不是不听，是我自己懒吧，能自己实现了，哈哈哈~这样还算是个...
- 京东商品详情页前端开发宝典
- 作者：周琪力，前端工程师，网络常用昵称「keelii」。在过去的4年里主要负责京东网站商品详情页的前端系统架构和开发，平时主要写JavaScript偶尔写一些NodeJS，Python。 简介 详情页也叫做单品页，域名以「item.jd.com/skuid.html」为格式的页面。是负责展示京东商品SKU的落地页面。主要任务是展示商品相关信息，如价格、促销、库存、推荐，从而引导
- 仿淘宝商品详情页，上拉查看更多详情demo（Activity和Fragment）。2种应用场景
- 仿淘宝商品详情页，上拉查看更多详情demo（Activity和Fragment）。2种应用场景
- 淘淘商城系列——商品详情页面对加入购物车进行改造
- 在上文中，我就讲过，关于购物车模块，京东和淘宝并不一样，京东允许用户在没有登录的情况下就添加商品进购物车，而且加到购物车里面的商品可以一直保存着。这其实是把购物车信息写入到了Cookie中，如果清空了Cookie也就清空购物车了。把购物车信息写入到了Cookie中也有其优缺点，优点有： 不占用服务端存储空间。 用户体验好。 代码实现简单。 缺点是： Cookie中保存的容量是有限的，最大为4k。 把
- 仿京东的商品展示详情页面
- 仿照京东商品展示详情页做的demo,解压到Hbuilder或者其他IDE中即可使用,商城项目中可以直接拿过来修改使用。
- 仿京东、淘宝商品详情页上拉显示详情的嵌套ScrollView
- 开发背景：在做安卓商城项目时，产品经理老是拿京东和淘宝做样板，然后，就有了这个demo，实现在商品详情页上拉显示详情，主要技术就是处理ScrollView嵌套ScrollView或WebView时触摸、滑动事件的交互处理 开发环境是eclipse,也会提供AS版本的源码 1、看一下效果图： 2、看一下项目的目录结构： 只有一个包，其中SlidingMenu,是最顶级的那个ScrollView,可
- 广告轮播+大图相册查看用于商品详情页
- 1、首先还是先把目录贴出来方便大家快速使用：将标红的导入到项目中、注意项目中用到了photoview（点击放大、缩小、旋转）、及universal-image-loader加载图片 需要配置： compile 'com.bm.photoview:library:1.4.1' compile 'com.nostra13.universalimageloader:universal-image
- SSM综合项目实战（TTSC） -- day11 商品详情页，FreeMarker
- 一、搭建商品详情系统 1、商品详情分析 查看京东和天猫，发现主流电商的商品详情页都是独立的域名展示。 因为商品数量大，访问的频率很高，需要单独把商品详情分离出来，方便对商品详情功能进行扩容(增加集群数量)。 我们搭建表现层taotao-item-web即可，调用taotao-manager的服务，获取商品数据。 2、搭建商品详情系统 3、添加
- React-Native仿某电商商品详情页面
- 前言: 一周又过去了,一直在赶需求,除了自己利用空余时间学习一下外压根就没时间去研究新东西,唉~程序猿就是这样,活到老学到老!! 废话不多说了,公司产品觉得某电商的商品详情页面很nice,问我们能不能实现(宝宝心里苦),于是研究了一波,下面把我研究的东西分享一下,小伙伴有啥好的实现方式还谢谢分享一下哦~拜谢! 先看一下最终实现的效果: ios/android 简单来说就是分为两个部分(上...
- 微信小程序商城系列之商品详情页
- wxml:<!--商品幻灯片--> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" class="banner" duration="{{duration}}" circular="{{duration}}"&
- iOS开发 - 商品详情页两种分页模式，只提供思路和实现方式。
- 上面的效果是商品详情页常用的两种模式，分页和不分页。首先请忽略博主懒得去写界面，真正的效果见下面： 不分页模式 分页模式然后先来依次说明下原理： 分页模式：看着和下拉刷新上拉加载的时候像不像？没错，博主这里用的MJRefresh写的效果，往上时下拉改变底部scrollView的偏移量，往下时加载结束改变底部scrollView的偏移量。其他的布局按照正常的界
- Vue模拟数据，实现路由进入商品详情页面
- Vue模拟数据，实现路由进入商品详情页面一、路由首先需要配置路由，就是点击good组件进入goodDetail组件 配置路由如下 { path: '/goodDetail', component:goodDetail }同时在good组件中写入如下点击事件，路由中加入查询参数，也就是商品的id//点击路由到商品详细信息页 selectGood(){
- react详情页展示详情信息并请求后台数据
- let url = "请求后台的路径"; let params1={}; params1.items=传递的参数; this.actions.executeFunc(url, "POST", params1, this.finishRefuseBackCallBack2) this.finishRefuseBackCallBack2 回调函数 finishR...
- 微信小程序实战篇-商品详情页（一）
- 哈喽，大家好，今天要进入新篇章啦，商品详情页，这个可是个大模块，要分好几次才能讲解清楚，现在我们先进行第一讲，老规矩，先上效果图有木有很酷炫啊，下面由代码君教你如何实现。详情页布局看效果图，可以知道详情页包含以下几个模块，banner、标题栏、选择购买栏、商品评价、商品详情、还有一个底部悬浮栏，这里比较难的是底部悬浮栏，剩下的我们之前模块我们之前就有布局过1. detail.wxml
- 商品详情页商品放大镜效果
- 源码下载地址：https://gitee.com/meijunna/lunbohtml<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3...
- vue仿淘宝商品详情demo
- 使用vue2仿照了淘宝商品详情以及加入购物车。包含的页面有首页、分类更多、商品详情，其中商品详情的加入购物车利用了vue的组件功能
- 仿淘宝上拉进入详情页交互的实现
- 前言 项目某个新需求的交互要求仿照淘宝上拉从下网上弹出宝贝详情。今天打开淘宝APP仔细看了看，然后自己写了写，现在感觉效果差不多了，记录一下。 分析 可以看到，该页面是分为两部分的，一部分是一开始就能看到的商品信息，然后我们上拉屏幕，屏幕不断往上滚动，滚动到第一部分结束时可以看到底部有“继续拖动，查看图文详情”一行文本出现。继续上拉到一个临界点便触发了翻页，此时第二部分以动画的形式从底部
- 实现淘宝商品详情页面的viewPager滑动到最后一张图片跳转的功能
- 之前写过仿淘宝的自定义viewGroup （点我查看）
- 带你逐步深入了解SSM框架——淘淘商城项目之商品详情页面实现
- 1. 课程计划 l 商品详情页实现 1、商品查询服务事项 2、商品详情展示 3、添加缓存 2. 实现商品详情页功能 2.1. 功能分析 1、Taotao-portal接收页面请求，接收到商品id。 2、调用taotao-rest提供的商品详情的服务，把商品id作为参数传递给服务。接收到商品详细详细。 3、渲染结果，展示商品详细页面 4、为了提
- 微信小程序实战篇-商品详情页（二）
- 今天要讲解商品详情页中sku的弹出选着框，这个涉及css动画样式，css动画是新的知识点，我们之前并没有接触过，请大家做好笔记，我们要做的效果是酱紫的~这个布局难点是需要绘制一个阴影背景、弹出的动画、购买数量加减的逻辑以及图片如何高于弹出框代码的实现1. detail.wxml