㈠ 手機端點擊彈窗處的「加入購物車」後，」購物車「處的數字變化怎麼在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中加入散花動態背景特效應該怎麼弄
我也想知道怎麼弄，元旦了加點效果增加網站節日氣氛。