JavaScript.案例

分手后的思念是犯贱 2022-06-04 05:10 270阅读 0赞

#### **window弹窗案例** ####

\-实现过程  
1、创建一个页面  
\*\* 有两个输入项和一个按钮  
\*\* 按钮上面有一个事件：弹出一个新窗口 open  
2、创建弹出页面  
\*\* 表格  
\*\* 每一行有一个按钮和编号和姓名  
\*\* 按钮上有一个事件：把当前的编号和姓名，赋值到第一个页面相应的位置  
*\*\**//实现s1方法  
function s1(num1,name1) \{  
//需要把num1和name1赋值到window页面  
//跨页面的操作 **opener：得到创建这个窗口的窗口 得到window页面**  
**var pwin = window.opener; //得到window页面**  
**pwin.document.getElementById(“numid”).value = num1;**  
**pwin.document.getElementById(“nameid”).value = name1;**  
//关闭窗口  
window.close();  
\}  
－　**opener:属性，获取创建当前窗口的窗口**  
\- 做这个案例时候会有一个问题  
*\** 由于我们现在访问的是本地文件，js安全性，谷歌浏览器安全级别很高，不允许访问本地文件  
*\** 在实际开发中，没有这样的问题，实际中不可能访问本地的文件。  
*\** [http://www.baidu.com][http_www.baidu.com]

#### **在末尾添加节点** ####

第一步：获取到ul标签  
第二步：创建li标签  
document.createElement(“标签名称”)方法  
第三步：创建文本  
document.createTextNode(“文本内容”);  
第四步：把文本添加到li下面  
使用 appendChild方法  
第五步：把里添加到ul末尾  
使用 appendChild方法  
![这里写图片描述][SouthEast]

<body>
    <ul id="ulid">
    <li>七里香</li>
    <li>再见</li>
    </ul>
    <input type="button" id="addid" value="add" onclick="add1()">
    <script type = "text/javascript"> function add1(){ var ul1 = document.getElementById("ulid"); var liend = document.createElement("li"); var text1 = document.createTextNode("我爱台妹"); liend.appendChild(text1); ul1.appendChild(liend); } </script>
     </body>

#### 动态显示时间 ####

\*得到当前的时间  
var date = new Date(); //得到不是常规的格式  
var d1 = date.toLocaleString(); //**格式化**  
\* 需要让页面每一秒获取时间  
**setInterval方法 定时器**  
\* 显示到页面上  
每一秒向div里面写一次时间  
\* **使用innerHTML属性**

\*代码  
function getD1() \{  
**//当前时间**  
var date = new Date();  
**//格式化**  
var d1 = date.toLocaleString();  
**//获取div**  
var div1 = document.getElementById(“times”);  
div1.innerHTML = d1;  
\}

**//使用定时器实现每一秒写一次时间**  
setInterval(“getD1();”,1000);

#### **全选练习** ####

\*\* 使用复选框上面一个属性判断是否选中  
\- checked属性  
\- **checked=true：选中**  
\- **checked=false：不选中**

\*创建一个页面  
\*\* 复选框和按钮  
\- 四个复选框表示爱好  
\- 还有一个复选框操作 全选和选不选，也有一个事件

\*\* 三个按钮，分别有事件  
\- 全选  
\- 全不选  
\- 反选

**\*全选操作**  
步骤：  
/\*  
1、获取要操作的复选框  
\- 使用getElementsByName()  
2、返回是数组，  
\- 属性 checked判断复选框是否选中  
*\** checked = true; //表示选中  
*\** checked = false;//表示不选中  
\- 遍历数组，得到的是每一个checkbox  
\* 把每一个checkbox属性checked=true  
\*/

**\*全不选操作**  
步骤  
/\*  
1、获取到要操作的复选框  
2、返回的是数组，遍历数组  
3、得到每一个复选框  
4、设置复选框的属性 checked=false  
\*/

**\*反选操作**  
步骤  
/\*  
1、获取到要操作的复选框  
2、返回数组，遍历数组  
3、得到每一个复选框  
4、判断当前的复选框是选中还是不选中  
\- if(love1.checked == true) \{\}  
5、如果选中，属性checked设置成false，否则，设置成true  
\*/

**\*使用复选框实现全选和全不选**  
步骤  
/\*  
1、得到上面那个复选框  
\- 通过id获取到  
2、判断这个复选框是否是选中  
\- if条件，**checked==true//注意是 = =**  
3、如果是选中，下面是全选  
4、如果不是选中，下面是全不选  
\*/

#### **下拉列表左右选择** ####

\*创建一个页面  
\*\* 两个下拉选择框  
\- 设置属性 **multiple**属性  
\*\* 四个按钮，有事件  
\* 选中添加到右边  
步骤  
/\*  
1、获取select1里面的option  
\- **getElementsByTagName()返回是数组**  
\- 遍历数组，得到每一个option  
2、判断**option**是否被选中  
\- 属性 selected，判断是否被选中  
\*\* **selected= true: 选中**  
\*\* **selected= false：没有选择**  
3、如果是选中，把选择的添加到右边去  
4、得到select2  
4、添加选择的部分  
\- appendChild方法  
\*/  
\* 全部添加到右边  
步骤  
/\*  
1、获取第一个select下面的option对象  
2、返回数组，遍历数组  
3、得到每一个option对象  
4、得到select2  
5、添加到select2下面  
\- appendChild方法  
\*/  
\* 选中添加到左边  
步骤  
/\*  
1、获取select2里面的option对象  
2、返回是数组，遍历数组  
3、得到每一个option对象  
4、判断option是否被选中  
\- if条件 属性 selected == true：选择  
5、获取select1  
6、添加到select1里面  
\- 使用appendChild方法  
\*/  
\* 全部添加到左边  
步骤  
/\*  
1、获取select2里面的option对象  
2、返回是数组，遍历数组  
3、得到每一个option对象  
4、获取到select1  
5、添加到select1里面  
\- 使用appendChild方法  
\*/

<div id="s1" style="float:left">
    * 下拉选择框
    <select id="sel1" multiple="multiple" style="width:100px;height:200px">
    <option>111</option>
    <option>111</option>
    </select>
    function toRight(){ 
    var sel1= document.getElementById("sel1");
    var sel2= document.getElementById("sel2");
    var options= sel1.getElementsByTagName("option");//要先得到父标签
    for(var i = 0;i<options.length;i++)
    {
    if(options[i].selected == true)//记得两个==
    {
    sel2.appendChild(options[i]);
    i--;
    }
    }
    }

#### **省市联动** ####

\*创建一个页面，有两个下拉选择框  
\* 在第一个下拉框里面有一个事件 ：改变事件 **onchange**事件  
\- 方法**add1(this.value)**;表示当前改变的option里面的value值  
\* 创建一个二维数组，存储数据  
\* 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市  
/\*  
1、遍历二维数组  
2、得到也是一个数组（国家对应关系）  
3、拿到数组中的第一个值和传递过来的值做比较  
4、如果相同，获取到第一个值后面的元素  
5、得到city的select  
6、添加过去（使用）appendChild方法  
\- 创建option（三步）  
\*/  
/\*  
由于每次都要向city里面添加option  
第二次添加，会追加。  
\* 每次添加之前，判断一下city里面是否有option，如果有，删除  
\*/

**ps: this.value对应的是option中 value的值**  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]  
![这里写图片描述][SouthEast 3]

#### **动态生成表格** ####

\*创建一个页面：两个输入框和一个按钮  
\*代码和步骤  
/\*  
1、得到输入的行和列的值  
2、生成表格  
\*\* 循环行  
\*\* 在行里面循环单元格  
3、显示到页面上  
\- 把表格的代码设置到div里面  
\- **使用innerHTML属性**  
\*/  
//获取输入的行和列  
var h = document.getElementById(“h”).value;  
var l = document.getElementById(“l”).value;  
//把表格代码放到一个变量里面  
var tab = “<table border=’1’ bordercolor=’blue’>”;  
//循环行  
for(var i=1;i<=h;i++) \{  
**tab += “<tr>”;//注意需要加引号**  
//循环单元格  
for(var j=1;j<=l;j++) \{  
tab += “<td>aaaaaaa</td>”  
\}  
tab += “</tr>”;  
\}  
tab += “</table>”;  
//alert(tab);

**//得到div标签 // 注意需要div标签**  
**var divv = document.getElementById(“divv”);**  
**//把table的代码设置到div里面去**  
**divv.innerHTML = tab;**  
\}

#### **冒泡排序** ####

#### **实现99乘法表（输出到页面上）** ####

*document.write("<table border='1' bordercolor='blue'>");
    //循环行 9
    for(var i=1;i<=9;i++) {
    document.write("<tr>");
    //循环列
    for(var j=1;j<=i;j++) {
    document.write("<td>");
    //运算
    document.write(j+"*"+i+"="+i*j);
    document.write("</td>");
    }
    //document.write("<br/>");
    document.write("</tr>");
    }
    document.write("</table>");

\-**document.write里面是双引号，如果设置标签的属性需要使用单引号**  
\-**document.write可以输出变量，还可以输出html代码**

#### **鼠标事件** ####

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>mouseOnclick</title>
        <script type="text/javascript">
        window.onload=function(){ 
            var but = document.getElementById("imagerid");
            but.onmousedown = function(){ 
                but.src="tour2.jpg";
            }
            but.onmouseup=function(){ 
                but.src="tour1.jpg";
            }
        }
        </script>
    </head>
    <body>
    <input id="imagerid" type="image" size="100" src="tour1.jpg"></input>
    </body>
    </html>
    
    ===============================================
    
    var but = document.getElementById("imagerid");
            if (typeof window.addEventListener != "undefined") {
            but.addEventListener("mousedown",function(){ 
                // alert("anxia");
            },false);//false是否在捕获阶段响应
            but.addEventListener("mouseup",function(){ 
                alert("taiqi");
            },false);
            }else{
                but.attachEvent("onmousedown",function(){ 
                alert("IEanxia");
            },false);
                but.attachEvent("onmouseup",function(){ 
                alert("IEtaiqi");
            },false);
            }

[http_www.baidu.com]: http://www.baidu.com
[SouthEast]: /images/20220604/b29cf47cd3a64b97a97d4e09b65cc962.png
[SouthEast 1]: /images/20220604/a65c512eb5ec47d68d3081d48d5ebf74.png
[SouthEast 2]: /images/20220604/d1495a38855e4b5cabc8eb2f849d9ea0.png
[SouthEast 3]: /images/20220604/620067c951cb47a9a53eefebfbdad054.png