㈠ 手机端点击弹窗处的“加入购物车”后，”购物车“处的数字变化怎么在html写
就是简单的数字加减，点击加入购物车后，将购物车的数字内容提取出来加一再回赋值到内容里。一般答数字部分会单独给一个标签来写入变量给js进行操作，
购物车还有加减按钮，也是将标签内容的数字加一减一就行了
数字的改变需要用到 js 或者其他js框架来进行操作
㈡ 求html购物车代码，，效果如图显示
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>修改订单</title>
<styletype="text/css">
body{
font-size:13px;
line-height:25px;
}
table{
border-top:1pxsolid#333;
border-left:1pxsolid#333;
width:400px;
}
td{
border-right:1pxsolid#333;
border-bottom:1pxsolid#333;
text-align:center;
}
.title{
font-weight:bold;
background-color:#cccccc;
}
inputtext{
width:100px;
}
</style>
<scripttype="text/javascript">
functionaddRow(){
//行的长度
varrowlength=document.getElementById("order").rows.length;
//得到整个表格对象
varorder=document.getElementById("order").insertRow(rowlength-1);
order.id=rowlength-1;
//插入列
varcel1=order.insertCell(0).innerHTML="游戏光盘";
varcel2=order.insertCell(1).innerHTML="34";
varcel3=order.insertCell(2).innerHTML="¥58.40";
varcel4=order.insertCell(3).innerHTML="<inputtype="button"value="删除"onclick="delRow('"+(rowlength-1)+"')"/>"+"<inputtype="button"value="修改"onclick="editRow('"+(rowlength-1)+"')"/>"
}
functiondelRow(qwe){
=document.getElementById(qwe).rowIndex;
document.getElementById("order").deleteRow(ewq);
}
functioneditRow(rowID){
varrow=document.getElementById(rowID);
varcel=row.cells;
vartext=cel[1].innerHTML;
cel[1].innerHTML="<inputtype='text'value='"+text+"'style='width:40px;'>"
cel[3].lastChild.value="确定";
cel[3].lastChild.setAttribute("onclick","update('"+rowID+"')");
}
functionupdate(qwe){
varrow=document.getElementById(qwe);
varcel=row.cells;
vartext=cel[1].lastChild.value;
cel[1].innerHTML=text;
cel[3].lastChild.value="修改";
cel[3].lastChild.setAttribute("onclick","editRow('"+qwe+"')");
}
/*
functionadd(){
vara=document.getElementById("order").rows.length;
varb=document.getElementById("order").insertRow(a-1);
varone1=b.insertCell(0).innerHTML="123";
}
*/
</script>
</head>
<body>
<tableborder="0"cellspacing="0"cellpadding="0"id="order">
<trclass="title">
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<trid="1">
<td>防滑真皮休闲鞋</td>
<td>12</td>
<td>¥568.50</td>
<td><inputname="rowdel"type="button"value="删除"onclick='delRow("1")'/>
<inputid="edit1"type="button"value="修改"onclick='editRow("1")'/></td>
</tr>
<tr>
<tdcolspan="4"style="height:30px;">
<inputname="addOrder"type="button"value="增加订单"onclick="addRow()"/></td>
</tr>
</table>
</body>
</html>
这个是我原来上学的时候练习的代码，练习的是基础的jsDOM操作，不过建议以后用Jquery 比较方便 有什么不懂得可以问我
㈢ jquery 实现加入购物车功能
参考以下代码：
注意需要导入.js.
<!DOCTYPEhtml>
<html>
<head>
<title>购物车----jQuery</title>
<metacharset="utf-8"/>
<styletype="text/css">
h1{
text-align:center;
}
table{
margin:0auto;
width:60%;
border:2pxsolid#aaa;
border-collapse:collapse;
}
tableth,tabletd{
border:2pxsolid#aaa;
padding:5px;
}
th{
background-color:#eee;
}
</style>
<scripttype="text/javascript"src="./js/jquery.js"></script>
<scripttype="text/javascript">
functionadd_shoppingcart(btn){//将btn(dom)转换为jQuery对象
//先获取商品名字和单价还有库存以备后面使用
var$tds=$(btn).parent().siblings();
//$tds.eq(0)是jQuery对象$tds[0]是DOM对象
varname=$tds.eq(0).html();//string
varprice=$tds.eq(1).html();//string
varstock=$tds.eq(3).html();//string
//查看库存是否还有<=0
if(stock<=0){
return;
}
//无论购物车中是否有该商品,库存都要-1
$tds.eq(3).html(--stock);
//在添加之前确定该商品在购物车中是否存在,若存在,则数量+1,若不存在则创建行
var$trs=$("#goods>tr");
for(vari=0;i<$trs.length;i++){
var$gtds=$trs.eq(i).children();
vargName=$gtds.eq(0).html();
if(name==gName){//若存在
varnum=parseInt($gtds.eq(2).children().eq(1).val());
$gtds.eq(2).children().eq(1).val(++num);//数量+1
//金额从新计算
$gtds.eq(3).html(price*num);
return;//后面代码不再执行
}
}
//若不存在,创建后追加
varli=
"<tr>"+
"<td>"+name+"</td>"+
"<td>"+price+"</td>"+
"<tdalign='center'>"+
"<inputtype='button'value='-'onclick='decrease(this);'/>"+
"<inputtype='text'size='3'readonlyvalue='1'/>"+
"<inputtype='button'value='+'onclick='increase(this);'/>"+
"</td>"+
"<td>"+price+"</td>"+
"<tdalign='center'>"+
"<inputtype='button'value='x'onclick='del(this);'/>"+
"</td>"+
"</tr>";
//追加到#goods后面
$("#goods").append($(li));
//总计功能
total();
}
//辅助方法--单击购物车中的"+""-""x"按钮是找到相关商品所在td,以jQuery对象返回
functionfindStock(btn){
varname=$(btn).parent().siblings().eq(0).html();//获取商品名字
//注意table默认有行分组,若此处使用$("#table1>tr:gt(0)")则找不到任何tr
var$trs=$("#table1>tbody>tr:gt(0)");
for(vari=0;i<$trs.length;i++){
varfName=$trs.eq(i).children().eq(0).html();
if(name==fName){//找到匹配的商品
return$trs.eq(i).children().eq(3);
}
}
}
//增加"+"功能
functionincrease(btn){
//获取该商品库存看是否<=0
var$stock=findStock(btn);
varstock=$stock.html();
if(stock<=0){
return;
}
//库存-1
$stock.html(--stock);
//购物车数据改变
var$td=$(btn).prev();
varnum=parseInt($td.val());//number
//num此时为number类型(在计算时会自动转换为number类型)
$td.val(++num);
//获取单价,再加计算前要先转换为number类型
varprice=parseInt($(btn).parent().prev().html());
$(btn).parent().next().html(num*price);
//总计功能
total();
}
//减少"-"功能
functiondecrease(btn){
//该商品数量=1时候不能再减少
varnum=parseInt($(btn).next().val());
if(num<=1){
return;
}
var$stock=findStock(btn);
//库存+1
varstock=$stock.html();
$stock.html(++stock);
//商品数量-1
$(btn).next().val(--num);
//从新计算金额
varprice=parseInt($(btn).parent().prev().html());
$(btn).parent().next().html(price*num);
//总计功能
total();
}
//"x"删除按钮功能
functiondel(btn){
//将商品数量归还库存
var$stock=findStock(btn);
varstock=parseInt($stock.html());
varnum=parseInt($(btn).parent().prev().prev().children().eq(1).val());
$stock.html(num+stock);
//清空改行商品列表
$(btn).parent().parent().remove();
//总计功能
total();
}
//总计功能
functiontotal(){
//获取所有购物车中的trs
var$trs=$("#goodstr");
varamount=0;
for(vari=0;i<$trs.length;i++){
varmoney=parseInt($trs.eq(i).children().eq(3).html());
amount+=money;
}
//写入总计栏
$("#total").html(amount);
}
</script>
</head>
<body>
<h1>真划算</h1>
<tableid="table1">
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
<tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td>黑色</td>
<td>5</td>
<td>98%</td>
<tdalign="center">
<inputtype="button"value="加入购物车"onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>微软X470键盘</td>
<td>150</td>
<td>黑色</td>
<td>9028</td>
<td>96%</td>
<tdalign="center">
<inputtype="button"value="加入购物车"onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>洛克iphone6手机壳</td>
<td>60</td>
<td>透明</td>
<td>672</td>
<td>99%</td>
<tdalign="center">
<inputtype="button"value="加入购物车"onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>蓝牙耳机</td>
<td>100</td>
<td>蓝色</td>
<td>8937</td>
<td>95%</td>
<tdalign="center">
<inputtype="button"value="加入购物车"onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>金士顿U盘</td>
<td>70</td>
<td>红色</td>
<td>482</td>
<td>100%</td>
<tdalign="center">
<inputtype="button"value="加入购物车"onclick="add_shoppingcart(this);"/>
</td>
</tr>
</table>
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
</thead>
<tbodyid="goods">
</tbody>
<tfoot>
<tr>
<tdcolspan="3"align="right">总计</td>
<tdid="total"></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
最终效果图:
㈣ js 如何实现弧线运动，天猫加入购物车效果，是弧线！！！要有弧度的
http://..com/link?url=fDpng7CK6CkBUtpYwfJW714W_
㈤ javascript+jsp实现在1.html把商品放购物车,在2.html显示购物车内的信息.看问题补充
不建议用cookie, 不安全,而且浏览器可能禁止cookie
还是把购买信息保存到服务器session中, 在2.html显示
㈥ HTML5动画特效怎么做
主要思想：
首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。
关键技术点：
JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，
另外一个参数代表间隔时间，单位为毫秒数。代码示例：
setTimeout( update, 1000/30);
Canvas的API-drawImage()方法，需要指定全部9个参数：
ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);
其中offw, offh是指源图像的起始坐标点，width, height表示源图像的宽与高，x2,y2表
示源图像在目标Canvas上的起始坐标点。
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="X-UA-Compatible"content="chrome=IE8">
<metahttp-equiv="Content-type"content="text/html;charset=UTF-8">
<title>CanvasMouseEventDemo</title>
<linkhref="default.css"rel="stylesheet"/>
<script>
varctx=null;//globalvariable2dcontext
varstarted=false;
varmText_canvas=null;
varx=0,y=0;
varframe=0;//225*5+2
varimageReady=false;
varmyImage=null;
varpx=300;
varpy=300;
varx2=300;
vary2=0;
window.onload=function(){
varcanvas=document.getElementById("animation_canvas");
console.log(canvas.parentNode.clientWidth);
canvas.width=canvas.parentNode.clientWidth;
canvas.height=canvas.parentNode.clientHeight;
if(!canvas.getContext){
console.log("Canvasnotsupported..");
return;
}
//
ctx=canvas.getContext("2d");
ctx.fillStyle="black";
ctx.fillRect(0,0,canvas.width,canvas.height);
myImage=document.createElement('img');
myImage.src="../robin.png";
myImage.onload=loaded();
}
functionloaded(){
imageReady=true;
setTimeout(update,1000/30);
}
functionredraw(){
ctx.clearRect(0,0,460,460)
ctx.fillStyle="black";
ctx.fillRect(0,0,460,460);
//findtheindexofframesinimage
varheight=myImage.naturalHeight/5;
varwidth=myImage.naturalWidth/5;
varrow=Math.floor(frame/5);
varcol=frame-row*5;
varoffw=col*width;
varoffh=row*height;
//firstrobin
px=px-5;
py=py-5;
if(px<-50){
px=300;
}
if(py<-50){
py=300;
}
//varrate=(frame+1)/22;
//varrw=Math.floor(rate*width);
//varrh=Math.floor(rate*height);
ctx.drawImage(myImage,offw,offh,width,height,px,py,width,height);
//secondrobin
x2=x2-5;
y2=y2+5;
if(x2<-50){
x2=300;
y2=0;
}
ctx.drawImage(myImage,offw,offh,width,height,x2,y2,width,height);
}
functionupdate(){
redraw();
frame++;
if(frame>=22)frame=0;
setTimeout(update,1000/30);
}
</script>
</head>
<body>
<h1>HTMLCanvasAnimationsDemo-ByGloomyFish</h1>
<pre>PlayAnimations</pre>
<divid="my_painter">
<canvasid="animation_canvas"></canvas>
</div>
</body>
</html>
㈦ 怎么在html中 加入一些特效 例如 html中 下雨 落叶
这个要用到html5+css3，或者用jquery、JavaScript来做！具体细节请先学习这几种技术！
㈧ 静态HTML网页可以实现购物车功能吗而且不用数据库...
没有人会做来这样的事自情,但是即然说了,可以讨论一下
一般的购物车,都要有SESSION和COOKIES来做,在没有服务端脚本语言的情况下操作SESSION是不可能的!
静态HTML里如果可以用JAVASCRIPT脚本,就可以操作COOKIES,将商品的信息保存在COOKIES中,购买成功后,可以用:mailto:[email protected] 的方式发送到邮箱!
㈨ html 5 和css 能做出什么特效
纯静态网页。代码与样式分开。易于被搜索引擎收录。
一、准备工作
进入到 /home/shiyanlou/ 目录下，新建空白文档：
命名为 Baymax.html （其它名字也可以，但后缀名必须是 .html）：
使用 gedit 打开，准备编辑代码：
二、编写 HTML
填写以下代码：
<!doctype html>
<html>
<head><meta charset="utf-8"><title>Baymax</title></head>
<body>
<div id="baymax">
<!-- 定义头部，包括两个眼睛、嘴 -->
<div id="head">
<div id="eye"></div>
<div id="eye2"></div>
<div id="mouth"></div>
</div>
<!-- 定义躯干，包括心脏 -->
<div id="torso">
<div id="heart"></div>
</div>
<!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->
<div id="belly">
<div id="cover"></div>
</div>
<!-- 定义左臂，包括一大一小两个手指 -->
<div id="left-arm">
<div id="l-bigfinger"></div>
<div id="l-smallfinger"></div>
</div>
<!-- 定义右臂，同样包括一大一小两个手指 -->
<div id="right-arm">
<div id="r-bigfinger"></div>
<div id="r-smallfinger"></div>
</div>
<!-- 定义左腿 -->
<div id="left-leg"></div>
<!-- 定义右腿 -->
<div id="right-leg"></div>
</div>
</body>
<html>
三、添加 CSS 样式
我们已经使用 HTML 定义好「大白」的各个元素，现在就需要利用到 CSS 来绘制它的样式外表。
由于「大白」是白色的，为了更容易辨识，我们把背景设为深色。
然后首先是头部：
body {
background: #595959;
}
#baymax{
/*设置为 居中*/
margin: 0 auto;
/*高度*/
height: 600px;
/*隐藏溢出*/
overflow: hidden;
}
#head{
height: 64px;
width: 100px;
/*以百分比定义圆角的形状*/
border-radius: 50%;
/*背景*/
background: #fff;
margin: 0 auto;
margin-bottom: -20px;
/*设置下边框的样式*/
border-bottom: 5px solid #e0e0e0;
/*属性设置元素的堆叠顺序； 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
z-index: 100;
/*生成相对定位的元素*/
position: relative;
}
效果预览：
赶紧再来添加眼睛和嘴吧！
#eye,
#eye2{
width: 11px;
height: 13px;
background: #282828;
border-radius: 50%;
position: relative;
top: 30px;
left: 27px;
/*旋转该元素*/
transform: rotate(8deg);
}
#eye2{
/*使其旋转对称*/
transform: rotate(-8deg);
left: 69px; top: 17px;
}
#mouth{
width: 38px;
height: 1.5px;
background: #282828;
position: relative;
left: 34px;
top: 10px;
}
㈩ 我想在我的html中加入散花动态背景特效应该怎么弄
我也想知道怎么弄，元旦了加点效果增加网站节日气氛。