您的位置：首页 > 编程语言 > Java开发

对cookie的简单运用

2017-01-12 19:36 211 查看 
提交订单页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交订单</title>
<style>
* {
margin: 0;
padding: 0;
}

#box {
margin: 0 auto;
text-align: center;
}

#ip {
width: 100px;
height: 40px;
outline: none;
border: none;
background-color: #ff1a1a;
color: #fff;
font-size: 16px;
font-family: Arial;
margin-top: 15px;
}

.money {
color: #ff1919;
}

strong {
color: #ff1919;
}

#number {
width: 50px;
outline: none;
}
</style>
<script>
window.onload = function () {
// 获取第一个span
var span = document.getElementsByTagName("span")[0];
// 获取第一个strong
var strong = document.getElementsByTagName("strong")[0];
// 获取input
var number = document.getElementById("number");
// 获取提交按钮
var btnSubmit = document.getElementById("ip");
// 点击事件
btnSubmit.onclick = function () {
// 创建字面量对象
var obj = {
// {key:value}
goodsName: span.innerHTML,
goodsPrice: strong.innerHTML,
goodsNumber: number.value
};
// 将JSON对象转成JSON字符串
var objStr = JSON.stringify(obj);
// JSON字符串赋值给cookie
document.cookie = objStr;
}
}
</script>
</head>
<body>
<div id="box">
<form action="购物车.html" method="get">
商品信息：               
                         
               &nbs
4000
p;        <br>
<img src="https://img-blog.csdn.net/20170112193814201?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXlkcmVhbWhvcGU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="坚果大礼包图片" title="坚果大礼包"><br>
商品名称：<span>坚果大礼包</span>
<br>
        <span class="money">￥</span><strong>5000</strong>
<br>
选择商品数量：<input id="number" type="number" min="1" max="100">
<br>
<input id="ip" type="submit" value="加入购物车">
</form>
</div>
</body>
</html>
购物车页面：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>购物车信息</title><style>span {color: #ff1919;}</style><script>window.onload = function () {// 商品名称var goodsName = document.getElementsByTagName("span")[0];// 商品单价var goodsPrice = document.getElementsByTagName("span")[1];// 商品数量var goodsNumber = document.getElementsByTagName("span")[2];// 商品总价var goodsTotalPrice = document.getElementsByTagName("span")[3];// 创建cookievar cookie = document.cookie;// 将JSON字符串转成JSON对象var obj = JSON.parse(cookie);// 商品名称goodsName.innerHTML = obj.goodsName;// 商品单价goodsPrice.innerHTML = obj.goodsPrice;// 商品数量goodsNumber.innerHTML = obj.goodsNumber;// 商品总价goodsTotalPrice.innerHTML = obj.goodsPrice * obj.goodsNumber;if (obj.goodsNumber==""){goodsNumber.innerHTML="0";goodsTotalPrice.innerHTML="0";}}</script></head><body><h5>你的购物车信息：</h5>商品图片：<br><img src="https://img-blog.csdn.net/20170112193814201?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXlkcmVhbWhvcGU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="坚果大礼包图片" title="坚果大礼包"><br>商品名称：<span></span><br>商品单价：<span></span><br>商品数量：<span></span><br>商品总价：<span></span><br></body></html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                javascript
                                                cookie
                                                JSON.parse
                                                JSON.stringify
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航