JavaScript基础知识（三）

来源：互联网发布：telnet 内网端口不通编辑：程序博客网时间：2024/06/05 18:49

JS的逻辑问题

1）冒泡

2）数组去重找出字符串里面字符最多的

3）1-100随机产生10个不同的数（2个for循环嵌套）

for(var i=0;i<10;i++){

//控制产生随机数

for( ; ; ){

//用当前的随机数和之前的随机数对比

}

1.运算符

前置 ++ - - //先加减，后运算

后置 ++ - - //先运算，后加减

2.js强制转化问题

1）parseInt() 函数可解析一个字符串，并返回一个整数

语法：parseInt(string, radix)
string 必需。要被解析的字符串。
radix可选。表示要解析的数字的基数。该值介于2 ~ 36 之间。如果省略该参数或其值为0，则数字将以10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于2 或者大于36，则 parseInt()将返回 NaN。
返回值：返回解析后的数字。
说明：
当参数 radix的值为 0，或没有设置该参数时，parseInt()会根据 string来判断数字的基数。
举例：
如果 string 以 "0x" 开头，parseInt()会把 string的其余部分解析为十六进制的整数。如果 string以 0 开头，那么 ECMAScript v3允许 parseInt()的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string以 1 ~ 9的数字开头，parseInt()将把它解析为十进制的整数。

2）parseFloat()函数可解析一个字符串，并返回一个浮点数。

该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

语法：parseFloat(string)
详细说明：

parseFloat 是全局函数，不属于任何对象。
parseFloat 将它的字符串参数解析成为浮点数并返回。如果在解析过程中遇到了正负号（+或 -）、数字(0-9)、小数点，或者科学记数法中的指数（e或 E）以外的字符，则它会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数。同时参数字符串首位的空白符会被忽略。如果参数字符串的第一个字符不能被解析成为数字，则parseFloat 返回NaN。

提示：可以通过调用 isNaN函数来判断 parseFloat的返回结果是否是 NaN。如果让NaN 作为了任意数学运算的操作数，则运算结果必定也是NaN。

3.数组

具有完整的数据格式多组数据

数组的定义方式：

1）var arr = ();

2）var arr = [];
3）var arr = new Array();

4.DOM元素操作

（1）.DOM 节点

根据 W3C 的 HTML DOM 标准，HTML文档中的所有内容都是节点：
节点父、子和同胞父（parent）、子（child）和同胞（sibling）

（2）.HTML DOM 对象 - 方法和属性

1）一些常用的 HTML DOM方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

2）一些常用的 HTML DOM属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点

（3）.DOM 对象方法

getElementById()

返回带有指定 ID 的元素。

getElementsByTagName()

返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

getElementsByClassName()

返回包含带有指定类名的所有元素的节点列表。

appendChild()

把新的子节点添加到指定节点。

removeChild()

删除子节点。

replaceChild()

替换子节点。

insertBefore()

在指定的子节点前面插入新的子节点。

createElement()

创建元素节点。

createTextNode()

创建文本节点。

代码：

1.三级联动——数组的使用方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
省：
<select id="p" onchange="p_select()">
<option value="">--请选择--</option>
</select>
市：
<select id="c" onchange="c_select()">
<option value="">--请选择--</option>
</select>
县：
<select id="x">
<option value="">--请选择--</option>
</select>
<script>
//在远程服务端获取的数据格式为数组型
            //定义一个省的数据
            var p_city=["陕西省","甘肃省","山西省","四川省"];
            //定义一个市的数据
            var c_city=[
                ["陕西省1","陕西省2","陕西省3","陕西省4"],
                ["甘肃省1","甘肃省2","甘肃省3","甘肃省4"],
                ["山西省1","山西省2","山西省3","山西省4"],
                ["四川省1","四川省2","四川省3","四川省4"]
            ];
            //定义一个县的数据
            var x_city=[
                [
                    ["陕西省11","陕西省12"],["陕西省21","陕西省22"],
                    ["陕西省31","陕西省32"],["陕西省41","陕西省42"]
                ],
                [
                    ["甘肃省11","甘肃省12"],["甘肃省21","甘肃省22"],
                    ["甘肃省31","甘肃省32"],["甘肃省41","甘肃省42"]
                ],
                [
                    ["山西省11","山西省12"],["山西省21","山西省22"],
                    ["山西省31","山西省32"],["山西省41","山西省42"]
                ],
                [
                    ["四川省11","四川省12"],["四川省21","四川省22"],
                    ["四川省31","四川省32"],["四川省41","四川省42"]
                ]
            ]
            //获取省元素
            var op=document.getElementById("p");
            //获取市元素
            var oc=document.getElementById("c");
            //获取县元素
            var ox=document.getElementById("x");
            //1.将数据动态绑定到元素
            /*实例化对象 new*/
            /* Option(文本值,value值)*/
           for(var i=0;i<p_city.length;i++){
               var option=new Option(p_city[i],i);
               //对象往元素追加用到的语法 appendChild（）
               op.appendChild(option);
           }
           //选择省调用市
           var xian;
           function p_select(){
               oc.options.length=1;
               var index=op.value;
               xian=x_city[index];
               var c_citys=c_city[index];
               for(var i=0;i<c_citys.length;i++){
                   var option=new Option(c_citys[i],i);
                   oc.appendChild(option);
               }
           }
           //选择省选择市调用县
           function c_select(){
               ox.options.length=1;
               var index=oc.value;
               var x_citys=xian[index];
              for(var i=0;i<x_citys.length;i++){
               var option=new Option(x_citys[i],i);
               ox.appendChild(option);
              }
           }

</script>
</body>
</html>

2.JS的购物车

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tabinfo{width: 600px;margin: 0 auto;border-collapse: collapse;}
.tabinfo td{border: 1px solid silver;line-height: 30px;text-align: center;}
.btn_left,.btn_right{outline: none;}
.txt_num{width: 40px;text-align: center;}
</style>
</head>
<body>
<button class="go_shop">支付</button>
<script>
var list=[
["棉袄1","100","5","500"],
                ["棉袄2","100","5","500"],
                ["棉袄3","100","5","500"],
                ["棉袄4","100","5","500"],
                ["棉袄5","100","5","500"]
];
//先创建页面   table 构建、
var tableinfo=document.createElement("table");
tableinfo.className="tabinfo";
//创建行
for(var i=0;i<list.length;i++){
var trinfo=document.createElement("tr");
trinfo.innerHTML="<td>"+list[i][0]+"</td><td class='td_price'>"+list[i][1]+"</td><td><button class='btn_left'>-</button><input type='text' disabled value='"+list[i][2]+"' class='txt_num' /><button class='btn_right'>+</button></td><td class='td_totleprice'>"+list[i][3]+"</td><td><button class='btn_delete'>删除</button></td>";
tableinfo.appendChild(trinfo);
}
            //获取body元素
var bodyinfo=document.getElementsByTagName("body")[0];
//将table元素添加给body
bodyinfo.appendChild(tableinfo);
//获取所有减号元素加号元素
var btn_left=document.getElementsByClassName("btn_left");
var btn_right=document.getElementsByClassName("btn_right");
//获取所有的文本框元素
var txt=document.getElementsByClassName("txt_num");
//获取行的单价
var tr_price=document.getElementsByClassName("td_price");
//获取行总价
var tr_totleprice=document.getElementsByClassName("td_totleprice")
bindclick();
//点击付款
var btn_go=document.getElementsByClassName("go_shop")[0];
btn_go.onclick=function(){
var totle=0;
for(i=0;i<tr_totleprice.length;i++){
     totle+=parseInt(tr_totleprice[i].innerHTML);
}
alert(totle);
}
//获取所有的删除按钮
var deletebtn=document.getElementsByClassName("btn_delete");
for(var i=0;i<deletebtn.length;i++){
deletebtn[i].onclick=function(){
this.parentNode.parentNode.remove();
bindclick();
}
}
//构造函数
function bindclick(){
//动态添加事件
    for(var i=0;i<btn_left.length;i++){
    btn_left[i].index=i;
    btn_left[i].onclick=function(){
    /* this 指代的是当前事件的执行对象*/
    var num=txt[this.index].value;
    num--;
    if(num<=1){
    num=1;
    }
    txt[this.index].value=num;
    tr_totleprice[this.index].innerHTML=num*tr_price[this.index].innerHTML;
    }
    btn_right[i].index=i;
    btn_right[i].onclick=function(){
    var num=txt[this.index].value;
    num++;
    txt[this.index].value=num;
    tr_totleprice[this.index].innerHTML=num*tr_price[this.index].innerHTML;
    }
    }
}
</script>
</body>
</html>

阅读全文

0 0