JavaScript小练习，计算器,定时器,大小图片切换,地址选择,购物车选品

已于 2022-08-12 10:53:33 修改
阅读量231 收藏
点赞数
分类专栏： javaSE 文章标签： 大数据
于 2022-07-15 22:53:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60555957/article/details/125813591
版权 
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/7/14 0014
  Time: 14:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        #d{
            border:1px solid red;
            width: 200px;
            height: 100px;
            /*display: none;*/
            text-align: center;
            visibility: hidden;
        }
        a{
            text-decoration: none;
            color: darkgoldenrod;
        }
        </style>
    <script>
        function add() {
            // alert('你好，小星星');
            //获取n1的值
            var n1 = document.getElementById("n1").value;
            //获取n2的值
            var n2 = document.getElementById("n2").value;
            //转换类型
            n1 = parseFloat(n1);
            n2 = parseFloat(n2);

            //计算
            var r = n1+n2;
            //赋值给result显示
            document.getElementById("result").innerHTML=r;
        }
        function sub() {
            // alert('你好，小星星');
            //获取n1的值
            var n1 = document.getElementById("n1").value;
            //获取n2的值
            var n2 = document.getElementById("n2").value;
            //转换类型
            n1 = parseFloat(n1);
            n2 = parseFloat(n2);

            //计算
            var r = n1-n2;
            //赋值给result显示
            document.getElementById("result").innerHTML=r;
        }
        function mul() {
            // alert('你好，小星星');
            //获取n1的值
            var n1 = document.getElementById("n1").value;
            //获取n2的值
            var n2 = document.getElementById("n2").value;
            //转换类型
            n1 = parseFloat(n1);
            n2 = parseFloat(n2);

            //计算
            var r = n1*n2;
            //赋值给result显示
            document.getElementById("result").innerHTML=r;
        }
        function div() {
            // alert('你好，小星星');
            //获取n1的值
            var n1 = document.getElementById("n1").value;
            //获取n2的值
            var n2 = document.getElementById("n2").value;
            //转换类型
            n1 = parseFloat(n1);
            n2 = parseFloat(n2);

            //计算
            var r = n1/n2;
            //赋值给result显示
            document.getElementById("result").innerHTML=r;
        }
        function yu() {
            // alert('你好，小星星');
            //获取n1的值
            var n1 = document.getElementById("n1").value;
            //获取n2的值
            var n2 = document.getElementById("n2").value;
            //转换类型
            n1 = parseFloat(n1);
            n2 = parseFloat(n2);

            //计算
            var r = n1%n2;
            //赋值给result显示
            document.getElementById("result").innerHTML=r;
        }

        var c;//变量指向setTimeout函数
        function f2() {
            var dt = new Date();
            var yyyy = dt.getFullYear();
            var mm = dt.getMonth()+1;
            var dd = dt.getDate();

            var hh = dt.getHours();
            var MM = dt.getMinutes();
            var ss = dt.getSeconds();
            var sss = dt.getMilliseconds();
            var time = yyyy+"年"+mm+"月"+dd+"日"+" "+hh+":"+MM+":"+ss+" "+sss;
            document.getElementById("time").value = time;
            // c = setTimeout("f2()",1);//指定时间毫秒后，执行一次
        }
        function f3() {
            clearTimeout(c);
        }
        var m;
        function f4() {
            m = setInterval("f2()",1);//指定时间毫秒后，执行一次
        }
        function f5() {
            clearInterval(m)
        }

        //显示图片
        function f6(v) {
            //获取小图的src
            var xt_src = v.getAttribute("src");
            //获取大图的src为小图的src
            document.getElementById("tu").setAttribute("src",xt_src)
        }
        //城市选择
        function f7() {
            //js来操作样式：注意，是元素的style点xxx
            //display点击选择城市，页面会根据内容变化，visibility不会，页面布局固定显示
            // document.getElementById("d").style.display="block";//不占位
            document.getElementById("d").style.visibility="visible";

        }
        function f8(v) {
            //innerHTML,可以将HTML里面的标签都打印
            //innerText，只打印内容
            // alert(v.innerHTML)
            // alert((v.innerText))
            // alert(v.firstChild.nodeValue);
            document.getElementById("cy").innerHTML = v.firstChild.nodeValue;
            document.getElementById("d").style.visibility="hidden";

        }

        //简易购物车
        function f9(v) {
            //alert(v.getAttribute("pname"))
            // alert(v);
            //拿到表
            var mytb = document.getElementById("mytb");
            //得到所有行
            var rows = mytb.rows;
            //得到事件触发的名字和ID
            var name = v.getAttribute("pname");
            //id是当购物车已有商品时，作为参数去定位商品所在购物车的行数
            var id = v.getAttribute("pid");
            for (var i = 0; i < rows.length; i++) {
                //循环遍历找到购物车每行数据的商品名称与点击的商品名比较
                var value = rows[i].cells[1].innerHTML;
                var bool = true;
                if (name == value) {
                    bool = false;
                    //跳出循环是为了确保购物车已经有同样的商品时，最后一条数据不是事件触发者本身，也不会添加数据，否则就会
                    break;
                }
            }
                //如果为真，就插入所选的商品
                if(bool){
                    //insertRow() 方法用于在表格中的指定位置插入一个新行。
                    var new_row = mytb.insertRow();
                    new_row.setAttribute("align","center");
                    //insertCell（） 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素
                    var cell_0 = new_row.insertCell();
                    //v是参数，传过来的参数如果是对象，就可以用这个对象去获取里面的属性值
                    /*对于innerHTML 属性，几乎所有的元素都有innerHTML属性，它是一个字符串，
                    用来设置或获取位于对象起始和结束标签内的HTML。
                    （获取HTML当前标签的起始和结束里面的内容）*/
                    cell_0.innerHTML=v.getAttribute("pid");
                    // cell_0.innerHTML=v;
                    var cell_1 = new_row.insertCell();
                    cell_1.innerHTML=v.getAttribute("pname");

                    var cell_2 = new_row.insertCell();
                    cell_2.innerHTML=v.getAttribute("price");

                    var cell_3 = new_row.insertCell();
                    cell_3.innerHTML='<a href="#" onclick="compu(this)">-</a><input type="text" size="3" name="num" value="1"><a href="#" onclick="compu(this)">+</a>';

                    var cell_4 = new_row.insertCell();
                    cell_4.innerHTML=v.getAttribute("price")

                    var cell_5 = new_row.insertCell();
                    cell_5.innerHTML='<a href="#" onclick="remove_(this)">移除</a>';
                    sum_();//求和
                }else{//为假就让点击触发的事件效果改为让购物车相同商品一栏的数量+1
                    compu2(id);
                }
            }

        function compu(v) {
            //取当前a的父的父，就是行
            var current_row = v.parentNode.parentNode;
            //当前行的第三个单元格的节点值：单价
            var price = parseFloat(current_row.cells[2].firstChild.nodeValue);
            //拿到数量
            var num = parseInt(current_row.cells[3].childNodes[1].value);

            //去你是+或-这个符号
            var op = v.innerHTML;
            if("+" == op){
                num = num+1;
            }else if("-" == op){
                if(num <=1){
                    num=1;
                }else {
                    num = num-1;
                }
            }
            current_row.cells[3].childNodes[1].value = num;
            //计算小计
            var xj = num*price;
            //显示在小计的位置上
            current_row.cells[4].innerHTML=xj;

            //改变一次数量就需要重新计算一次总价
            sum_();
        }

        function compu2(v) {
            //取购物车表格
            var mytb = document.getElementById("mytb");
            //得到表格的所有行
            var rows = mytb.rows;
            //循环找到与商品ID相同的行
            for (var i = 0; i < rows.length; i++) {
                //取每一行的商品id,cells[0]只是定位到了单元格 写了innerHTML才是获取到里面的HTML标签里面的内容
                var id = rows[i].cells[0].innerHTML;
                if (id == v) {
                    //因为要重新计算小计价格，所以要取到价格和数量
                    var price = parseFloat(rows[i].cells[2].firstChild.nodeValue);
                    var num = parseFloat(rows[i].cells[3].childNodes[1].value);
                    num = num + 1;//购物车有相同商品时，点击商品让购物车商品数量+1
                    //数量+1
                    rows[i].cells[3].childNodes[1].value = num;

                    var xj = num * price;//重新计算小计价格id
                    rows[i].cells[4].innerHTML = xj;
                    sum_();
                }
            }
        }

        //求和方法
        function sum_() {
            var sum = 0;
            var mytb = document.getElementById("mytb");
            if(mytb.rows.length >1){
                for(var i =1;i<mytb.rows.length;i++){
                    sum += parseFloat(mytb.rows[i].cells[4].firstChild.nodeValue);
                }
            }
            document.getElementById("total").innerHTML = sum;
        }

        //移除所选项
        function remove_(v){
            //当前行
            var current_row = v.parentNode.parentNode;
            //行索引
            var rowIndex = current_row.rowIndex;
            //拿到表，调用deleteRow删除
            document.getElementById("mytb").deleteRow(rowIndex);
            sum_()//求和

        }
        //清空购物车
        function f10() {
            var mytb = document.getElementById("mytb");
            var l = mytb.rows.length;
            //如果下面的i写成0，那么最后会导致给总价赋值为0的这句话不再执行
            // 因为最后一次执行删第二行的时候会执行不了，因为已经没有了，只剩第一行了
            for (var i = 1; i < l; i++) {
                mytb.deleteRow(1);
            }
            document.getElementById("total").innerHTML = 0;
        }
        //清空购物车的方法
        /*function reset(){
            //rows.length会随着每删除一行而减少1，所以一进入方法就取得表当中的行数，
            //并且赋值给一个新变量，再每次循环遍历删除
            var l = document.getElementById("mytb").rows.length;
            for (var i = 1; i < l; i++) {
                document.getElementById("mytb").deleteRow(1);
            }
            document.getElementById("total").innerHTML = 0;
            // alert("1");
        }*/
    </script>
</head>
<body>
<div style="width: 100%" align="center"><h2 style="color: orangered"><em>工具妙妙屋</em></h2></div>
<hr>
<%--左边--%>
<div style="width: 50% ; float: left">
<table border="1" width="100%">
    <tr>
        <td colspan="2" width="100%">工具1：计算器</td>
    </tr>
    <tr>
        <td width="50%"><!--this指代当前标签-->
            <input type="text" name="n1" id="n1"><br>
            <input type="text" name="n2" id="n2"><br>

            <input type="button"  value="+" onclick="add();">
            <input type="button"  value="-" onclick="sub();">
            <input type="button"  value="*" onclick="mul();">
            <input type="button"  value="/" onclick="div();">
            <input type="button"  value="%" onclick="yu();">
        </td>
        <br>
        <td width="50%">答案：<label id="result"></label></td></td>
    </tr>
    <tr>
        <td colspan="2" width="100%">工具2：计时器</td>
    </tr>
    <tr>
        <td width="100%"><!--this指代当前标签-->
            <input type="text" id="time" size=40><br>
            <button onclick="f2()">setTimeout单次定时</button>
            <button onclick="f3()">setTimeout停止</button>
            <button onclick="f4()">setInterval循环定时</button>
            <button onclick="f5()">setInterval停止</button>
        </td>
    </tr>
    <tr>
        <td colspan="2" width="100%">工具3：图片切换</td>
    </tr>
    <tr>
        <td width="100%"><!--this指代当前标签-->
<%--            限定图片显示的高度，宽度自适应。--%>
            <img src="images/cat.png" alt="好看的" id="tu" height="247" >
            <hr>
            <img src="images/cat.png" width="30" onmouseover="f6(this);">
            <img src="images/bear.png" width="30" onmouseover="f6(this);">
            <img src="images/jun2.png" width="30" onmouseover="f6(this);">
            <img src="images/jun3.png" width="30" onmouseover="f6(this);">
            <img src="images/site1.jpg" width="30" onmouseover="f6(this);">
            <img src="images/site2.jpg" width="30" onmouseover="f6(this);">
            <img src="images/site3.jpg" width="30" onmouseover="f6(this);">


        </td>
    </tr>

    <tr>
        <td colspan="2" width="100%">工具4：城市选择</td>
    </tr>
    <tr>
        <td width="100%"><!--this指代当前标签-->
            city:&nbsp&nbsp<button onclick="f7();"id ="cy">请选择城市</button>
            <hr>
            <div id="d">
                <a href="#" onclick="f8(this)">北京</a>
                <a href="#" onclick="f8(this)">北海</a>
                <a href="#" onclick="f8(this)">成都</a>
            </div>
        </td>
    </tr>
</table>
</div>
<%--右边--%>
<div style="width: 50%;float: right;margin-top: 20px">
<table border="1" width="100%">
    <tr>
        <td colspan="2" width="100%">工具5：购物车</td>
    </tr>
    <tr>
        <td width="100%">
            <table border="1" width="100%" align="center">
                <tr align="center">
                    <td>编号</td>
                    <td>名称</td>
                    <td>单价</td>
                </tr>
                <tr align="center">
                    <td>1</td>
                    <!--        return false表示触发事件时不进行跳转-->
                    <td><a href="#" pid="1" pname="苹果" price="7" onclick="f9(this);return false;">苹果</a></td>
                    <!--        自定义属性只能用 .getAttribute（""）方法来取-->
                    <!--        <td><a href="#" pid="1" pname="苹果" price="7" onclick="f(this.getAttribute('pname'));return false;">苹果</a></td>-->
                    <!--        <td><a href="#" pid="1" pname="苹果" price="7" onclick="f(this.value);return false;">苹果</a></td>-->
                    <td>7</td>
                </tr>
                <tr align="center">
                    <td>2</td>
                    <td><a href="#" pid="2" pname="西瓜" price="5" onclick="f9(this);return false;">西瓜</a></td>
                    <td>3</td>
                </tr>
                <tr align="center">
                    <td>3</td>
                    <td><a href="#" pid="3" pname="香蕉" price="3" onclick="f9(this);return false;">香蕉</a></td>
                    <td>5</td>
                </tr>
                <tr align="center">
                    <td>4</td>
                    <td><a href="#" pid="4" pname="牛油果" price="15" onclick="f9(this);return false;">牛油果</a></td>
                    <td>15</td>
                </tr>

            </table>
            <table border="1px" width="100%" align="center" id="mytb">
                <tr align="center">
                    <td>编号</td>
                    <td>名称</td>
                    <td>单价/斤</td>
                    <td>数量/斤</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </table>
            总价：<span id ="total"></span>
            <input type="reset" value="重新选购" onclick="f10()">
        </td>
    </tr>
</table>
</div>
<%--<form action="">
    <fieldset style="width: 25%">
        <legend align="center">工具3：计时器</legend>
    </fieldset>
</form>--%>
</body>
</html>

 

 

小俊会编码
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值