静态网页基础知识

最新推荐文章于 2024-07-10 14:03:37 发布

five five five

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量178

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_69266073/article/details/140279046

版权

1、获取输入框的输入值

var x = document.getElementById('userInput').value

赋值的话：document.getElementById('userInput').value = 1

2、获取td的值、span的值等一个区域的值

var x = document.getElementById('result').innerText

赋值：document.getElementById('result').innerText = ”1“

或者：document.getElementById('result').innerHTML = 1

3、获得一个父组件的所有”x“类型的子组件

getElementsByTagName

如获得ul下面所有li类型的组件：

//获取ul
var ul = document.getElementById("photos"
//得到ul下面叫做li的所有标签
var lis =ul.getElementsByTagName("li");

4、设置定时：

setInterval(方法，间隔时间)-----间隔多久时间执行一次方法

如：

setInterval( function (){
    //获取ul
    var ul = document.getElementById("photos")
    //得到ul下面叫做li的所有标签
    var lis =ul.getElementsByTagName("li");
    for(var i =0;i<lis.length;i++){
        lis[i].className="hide"
    }
    //下一个li显示
    index++;
    lis[index%lis.length].className="show"
},1000)

5、通过js创造新的组件并且添加到页面上显示

document.createElement("类型")

如：创造一个option类型的新节点

var option = document.createElement("option")

设置新节点的value值为3，代表是select中第四个选项：

option.setAttribute("value",3)

设置新节点的属性值

option.innerHTML=”第四个选项“

应用新节点到select中

document.getElementById("select").appendChild(option)

同样的，ul也可以用这种方法添加，不过创建的新节点是li

var li= document.createElement("li")

6、购物车案例，关键是要理清楚逻辑，通过层级关系去找需要的东西

<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
    <meta charset="utf-8" />
    <style type="text/css">
      h1 {
        text-align:center;
      }
      table {
        margin:0 auto;
        width:60%;
        border:2px solid #aaa;
        border-collapse:collapse;
      }
      table th, table td {
        border:2px solid #aaa;
        padding:5px;
      }
      th {
        background-color:#eee;
      }
    </style>
    <script type="text/javascript">
      function add_shoppingcart(btn){

        //1.根据点击的按钮找到同行的商品和单价
        //根据点击的按钮找到他的爷爷，行
        var tr = btn.parentNode.parentNode;
        //爷爷tr的所有儿子td
        var tds = tr.getElementsByTagName("td");
        //第一个td是商品名
        var name = tds[0].innerText;
        //第二个td是价格
        var price = tds[1].innerText;
        //alert(price);
        //获得购物车
        var tbody = document.getElementById("goods");

        //判断购物车每一行，看是不是已经有同样的商品了，如果是的话就应该直接改变购物车里的对应行的数量和价格
        var tbtrs = tbody.getElementsByTagName("tr");//tbody的每一行
        for(var i=0;i<tbtrs.length;i++){
          var tbtds = tbtrs[i].getElementsByTagName("td");//tbody某一行的所有列
          if(name == tbtds[0].innerText){//第一列是商品名，如果点击加入购物车的商品在购物车中
            var inputtd = tbtds[2];//获得购物车里加号所在列
            var inputs = inputtd.getElementsByTagName("input");//获得第三列所有input（-，数量，+）
            var button = inputs[2];//加号按钮
            increase(button);//将这个按钮作为参数执行加加方法
            return;//结束方法
          }
        }


        //2.创建一个tr插入到购物车table下面
        var ntr = tbody.insertRow();
        //3.编写这一行的商品名和价格
        ntr.innerHTML=
                '<td>'+name+'</td>'+
                '<td>'+price+'</td>'+
                '<td align="center">'+
                    '<input type="button" value="-" onclick="decrease(this)"/>'+
                    '<input type="text" size="3" id="sl" value="1"/>'+
                    '<input type="button" value="+" onclick="increase(this)">'+
                '</td>'+
                '<td id="allPrice">'+price+'</td>'+
                '<td>'+
                '<input type="button" value="x" onclick="del(this)"/>'+
                '<td>'

        //4.改变总和
        total();
      }
      //删除一行
      function del(btn){
        //获取按钮对应的这一行
        var deltr = btn.parentNode.parentNode;
        //用这一行的父节点来删除这一行
        deltr.parentNode.removeChild(deltr);

        //4.改变总和
        total();
      }
      //数量++
      function increase(btn){
        //1.数量++
        var intd = btn.parentNode;//得到按钮所在列
        //得到该列所有叫input的组件，数量是第二个组件
        var inputs = intd.getElementsByTagName("input");
        var sl = inputs[1];
        var value = parseInt(sl.value);
        sl.value = ++value;
        // sl.setAttribute("value",++value);
        // alert(sl.value)

        //2.获取单价
        //获取这一行
        var trs = btn.parentNode.parentNode;
        //获取所有td
        var tds = trs.getElementsByTagName("td");
        //获取单价,单价是td里的text，
        var price = tds[1].innerText;

        //3.数量*单价
        var all = parseInt(price)*parseInt(sl.value);
        var alltd = tds[3];
        alltd.innerText = all;

        //4.改变总和
        total();

      }

      //数量--
      // function decrease(btn){
      //   //获得点击的这一行tr
      //   var intr = btn.parentNode.parentNode;
      //   //获得这一行的数量,不对，这只能获取第一行sl
      //   var sl = document.getElementById("sl");
      //
      //   //数量减减
      //   var sl1 = parseInt(sl.value)-1
      //   sl.setAttribute("value",sl1) ;
      //   alert(sl.value)
      //
      //   //获得这一行的单价
      //   var intds = intr.getElementsByTagName("td");
      //   var price = intds[1].innerText;
      //   //alert(price)
      //
      //   //修改这一行的总金额
      //   var allprice = intds[3];
      //   var a = parseInt(sl1)*parseInt(price);
      //   allprice.innerHTML=a;
      // }
      //数量减减
      function decrease(btn){
        //先判断能不能减，如果数量是0则不能减
        var btntd = btn.parentNode;
        var inputs = btntd.getElementsByTagName("input");
        var sl = inputs[1];

        if(sl.value==0){
          //alert("数量为0，不能减");
          return;//1.方法有返回值时，结束方法、返回返回值,2.结束方法
        }
        else{
          //1.减减
          var value = parseInt(sl.value);
          sl.value = --value;
          //2.获取单价
          var tr = btn.parentNode.parentNode;
          var tds = tr.getElementsByTagName("td");
          var price = tds[1].innerText;
          //3.改变总金额
          var all = tds[3];
          all.innerText = parseInt(sl.value)*parseInt(price)

          //4.改变总和
          total();
        }
      }

      //改变合计
      function total(){
        var all = 0;//总金额
        //1.得到total列
        var total = document.getElementById("total");
        //2.遍历购物车表格tbody每一行tr的第四列td
        var tbody = document.getElementById("goods");
        var trs = tbody.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
          var tds = trs[i].getElementsByTagName("td");
          all += parseInt(tds[3].innerText)
        }
        total.innerText = all;
      }

    </script>
  </head>
  <body>
    <h1>真划算</h1>
    <table>
      <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
      </tr>   
      <tr>
        <td>罗技M185鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>微软X470键盘</td>
        <td>150</td>
        <td>黑色</td>
        <td>9028</td>
        <td>96%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>洛克iphone6手机壳</td>
        <td>60</td>
        <td>透明</td>
        <td>672</td>
        <td>99%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>蓝牙耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>8937</td>
        <td>95%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>金士顿U盘</td>
        <td>70</td>
        <td>红色</td>
        <td>482</td>
        <td>100%</td>
        <td align="center">
          <input type="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>
      <tbody id="goods">             
<!--        <tr>-->
<!--          <td>罗技M185鼠标</td>-->
<!--          <td>80</td>-->
<!--          <td align="center">-->
<!--            <input type="button" value="-"/>-->
<!--            <input type="text" size="3" readonly value="1"/>-->
<!--            <input type="button" value="+"/>-->
<!--          </td>-->
<!--          <td>80</td>-->
<!--          <td align="center"><input type="button" value="x"/></td>-->
<!--        </tr>         -->
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="right">总计</td>
          <td id="total"></td>
          <td></td>
        </tr>
      </tfoot>
    </table>    
  </body>
</html>

five five five

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
静态网页基础知识

赋值：document.getElementById('result').innerText = ”1“赋值的话：document.getElementById('userInput').value = 1。或者：document.getElementById('result').innerHTML = 1。同样的，ul也可以用这种方法添加，不过创建的新节点是li。2、获取td的值、span的值等一个区域的值。3、获得一个父组件的所有”x“类型的子组件。如：创造一个option类型的新节点。
复制链接

扫一扫

静态网页基础知识

“相关推荐”对你有帮助么？