首页 > 代码库 > JavaScript初探 三
JavaScript初探 三
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title></head><body> <input type="text" id="userName" value="http://www.mamicode.com/请输入用户名" style="color: #c8c1c1" /> <br /> <input type="text" id="userPass" value="http://www.mamicode.com/请输入密码" style="color: #c8c1c1" /></body></html><script type="text/javascript"> //用户名框获得焦点事件 document.getElementById("userName").onfocus = function () { // alert(this.style.color); if (this.value.trim() == "请输入用户名") { //清空自己的文本 this.valuehttp://www.mamicode.com/= ""; //修改自己的字体颜色 this.style.color = "black"; } } //用户名失去焦点事件 document.getElementById("userName").onblur = function () { if (this.value.trim()=="") { //还原文本, this.valuehttp://www.mamicode.com/= "请输入用户名"; //还原样式 this.style.color = "#c8c1c1"; } } //密码框获得焦点事件 document.getElementById("userPass").onfocus = function () { // alert(this.style.color); if (this.value.trim() == "请输入密码") { //清空自己的文本 this.valuehttp://www.mamicode.com/= ""; //修改自己的字体颜色 this.style.color = "black"; //修改type this.type = "password"; } } //密码框失去焦点事件 document.getElementById("userPass").onblur = function () { if (this.value.trim() == "") { //还原文本, this.valuehttp://www.mamicode.com/= "请输入用户名"; //还原样式 this.style.color = "#c8c1c1"; //还原type this.type = "text"; } } </script>定时器和计时器
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title></head><body> <input type="button" value="http://www.mamicode.com/开启定时器" id="timeOpen" /> <input type="button" value="http://www.mamicode.com/关闭定时器" id="timeClose" /> <input type="button" value="http://www.mamicode.com/开启计时器" id="interOpen" /> <input type="button" value="http://www.mamicode.com/关闭计时器" id="interClose" /></body></html><script type="text/javascript"> function eatFood(foodName, bedName) { alert("中午吃" + foodName + "在" + bedName + ",睡觉觉"); } function sleep(){ alert("zzzZZZZZ"); } //-------------分割线 var timeOutId;//定时器id //定时器,延迟调用,只调用一次,延迟时间单位是毫秒 document.getElementById("timeOpen").onclick = function () { //同时接收定时器id timeOutId = window.setTimeout(eatFood, 2000, "鸡腿饭,叉烧双拼", "课桌上"); } //关闭定时器的方法 通过id document.getElementById("timeClose").onclick = function () { window.clearTimeout(timeOutId); } var interId; //计时器,延迟调用,会一直执行,传参的方式 跟定时器一样 document.getElementById("interOpen").onclick = function () { //同时接收定时器id interId = window.setInterval(sleep, 1000); } //通过id关闭计时器 document.getElementById("interClose").onclick = function () { //同时接收定时器id interId = window.clearInterval(interId); }</script>自动切换图片
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> div { border: 1px solid #0094ff; margin: 0 auto; } #divImg { width: 300px; height: 192px; } #divInfo { width: 300px; height: 30px; margin-top:5px; } li { float: left; height: 15px; width: 25px; text-align: center; line-height: 15px; background-color:#ffd800; margin-left:2px; color:#ff0000; } ol { list-style: none; margin:0px; padding:0px; } </style></head><body> <div id="divImg" style="position:relative"> <div style="position:absolute;right:0px;bottom:0px;border:none;padding:0px;margin:0px"> <ol> <li key="button1">1</li> <li key="button2">2</li> <li key="button3">3</li> <li key="button4">4</li> </ol> </div> </div> <div id="divInfo"></div></body></html><script type="text/javascript"> //图片信息数据存储 var imgInfoArr = [ { "key": "button1", "imgPath": "/img/1.jpg", "imgInfo": "两个小loli" }, { "key": "button2", "imgPath": "/img/2.jpg", "imgInfo": "嫦娥本月" }, { "key": "button3", "imgPath": "/img/3.jpg", "imgInfo": "美女与野兽" }, { "key": "button4", "imgPath": "/img/4.jpg", "imgInfo": "学生装cosplay" } ]; //为数据对象绑定方法--面向对象 //循环判断传入的key 符合哪一个,返回符合的对象 imgInfoArr.GetObjByKey = function (key) { for (var i = 0; i < this.length; i++) { if (this[i].key == key) { return this[i]; } } } //---------------上面是准备数据下面是绑定方法 //获取所有的li标签 var liObjs = document.getElementsByTagName("li"); //为li标签绑定点击事件--通过dom元素.getAttribute("属性名")可以获取自定义属性 for (var i = 0; i < liObjs.length; i++) { liObjs[i].onclick = function () { //获取自定义属性 key var myKey = this.getAttribute("key"); //通过key去获取对象 var imgInfoObj = imgInfoArr.GetObjByKey(myKey); //将对象的属性设置给 图片div 还有文字div //修改背景图片 document.getElementById("divImg").style.backgroundImage = "url(" + imgInfoObj.imgPath + ")"; //修改文字 document.getElementById("divInfo").innerHTML = imgInfoObj.imgInfo; } } //全局变量--li标签 索引 var liIndex = 0; //开启计时器,自动调用图片切换方法 setInterval(autoClick, 2000); //手动调用 自动点击方法.让第一个li标签被点击 autoClick(); //封装的方法, function autoClick() { //手动调用li标签的点击事件 liObjs[liIndex].onclick(); //所应增加,并且判断是否越界 liIndex++; liIndex = liIndex > 3 ? 0 : liIndex; } ////根据key获取 对象的方法 //function GetImgObj(key) { // for (var i = 0; i < imgInfoArr.length; i++) { // if (imgInfoArr[i].key == key) // { // return imgInfoArr[i]; // } // } //} //var someObj=GetImgObj("button3"); //alert(someObj.key+"|"+someObj.imgPath+"|"+someObj.imgInfo); </script>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> //window.onclick = function () { // alert("你点击了页面"); //} //页面资源加载完毕 //html+css+js解析完毕 //图片,视频,音频,加载完毕 window.onload = function () { alert("资源加载完毕"); document.getElementById("12"); //haha = document.getElementById("123"); //给body加点击事件 //body的作用域,跟他的大小有关, //body的本质是一个div,大小跟自己内部的元素有关 //所有要让整个页面都为时间触发区域,就添加给window对象 document.body.onclick = function () { alert("你点击了body"); } } </script></head><body style="background-color:#00e0ff;border:1px solid #0094ff;"> <br /> <br /> <br /></body></html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <ul id="ulList">asdfdasfasdf <li>柯震东</li> <li>蓝翔技校</li> <li>新东方烹饪学校</li> <li>北大青鸟</li> </ul> </body> </html> <script type="text/javascript"> var ulObj = document.getElementById("ulList"); //dom元素.children 获取到所有的子节点(html标签) //dom元素.childNodes获取所有的节点,包含文本节点--了解即可,用的不多 // alert(ulObj.childNodes.length+"|||"+ulObj.children.length); //01.获取所有的子节点 //for (var i = 0; i < ulObj.children.length; i++) { // alert(ulObj.children[i].innerHTML); //} //02.快速获取老大,老末 //firstChild获取到的是文本节点--lastChild //firstElementChild获取html节点--lastElementChild // alert(ulObj.firstChild.textContent); // alert(ulObj.firstElementChild.innerHTML); //03.相对定位 //nextElementSibling获取下一个html节点 ulObj.firstElementChild.nextElementSibling.style.backgroundColor = "green"; ulObj.lastElementChild.previousElementSibling.style.backgroundColor = "red"; </script>
<!DOCTYPE html ><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> div { border: 1px solid #0094ff; width: 400px; margin: 10px auto; text-align: center; } table { border: 1px solid #0094ff; border-collapse: collapse; width: 400px; margin: 10px auto; text-align: center; } td { border: 1px solid #0094ff; } </style> <script type="text/javascript"> alert(document.getElementById("textH")); </script></head><body> <div> <input type="button" value="http://www.mamicode.com/新增菜单" id="btnAddOpt" /> 菜单: <select id="selList"> <option>水煮肉片</option> <option>鱼香肉丝</option> <option>番茄炒蛋</option> </select> 数量: <div id="divNumEdit" style="width: auto; height: auto; padding: 0px; margin: 0px; display: inline-block; border: 0px;"> <input type="button" value="http://www.mamicode.com/+" id="btnAddTic" onclick="NumChange(this)" style="cursor: pointer;" /> <span id="ticketNums">0</span> <input type="button" value="http://www.mamicode.com/-" id="btnSubTic" onclick="NumChange(this)" style="cursor: pointer;" /> </div> </div> <div> <input type="button" value="http://www.mamicode.com/新增订单" id="btnAddList" /> </div> <table id="tbList"> <tr> <td>序号</td> <td>菜名</td> <td>数量</td> <td>编辑</td> </tr> <tr> <td> <input type="checkbox" class="chkOne" /> 1 </td> <td foodindex="0">水煮肉片</td> <td>2</td> <td><a href="javascript:void(0)">删除</a> <a href="javascript:void(0)" onclick="IntoEdit(this)">编辑</a></td> <!--这里传递进去的this 是a标签--> </tr> </table> <div style="text-align: left; padding-left: 2px; width: 396px"> <input type="checkbox" id="chkAll" /><label for="chkAll">全选</label> <a href="javascript:delCheckedTr();">批量选中</a> </div></body></html><script type="text/javascript"> var oldFoodName;//保存开始的菜名 var oldFoodNum;//保存开始的数量 //----------------封装的方法 //修改 数量的方法 function NumChange(inputObj) { switch (inputObj.value) { case "+": //按钮 div span var oldNum = inputObj.parentNode.children[1].innerHTML; oldNum++; inputObj.parentNode.children[1].innerHTML = oldNum; break; case "-": //按钮 div span var oldNum = inputObj.parentNode.children[1].innerHTML; oldNum--; oldNum = oldNum < 0 ? 0 : oldNum; inputObj.parentNode.children[1].innerHTML = oldNum; break; } } //进入编辑状态 function IntoEdit(aObj) { //根据a标签获取所在的tr var editTr = aObj.parentNode.parentNode; //修改第二个td 为select标签 var td01 = editTr.children[1];//获取第二个单元格 索引 var cloneSelect = document.getElementById("selList").cloneNode(true);//克隆select标签--并且设置select标签的value值 cloneSelect.value = http://www.mamicode.com/td01.innerHTML; //获取里面的innerHTML值""; //清空td的innerHTML td01.appendChild(cloneSelect); //将克隆的select标签追加到td里面去 //修改第三个td为数量编辑框 var td02 = editTr.children[2]; //获取第三个td的 var cloneNumEdit = document.getElementById("divNumEdit").cloneNode(true); //克隆数量编辑框 cloneNumEdit.children[1].innerHTML = td02.innerHTML; //修改数量编辑框里面的数量 //------------保存原始数量 oldFoodNum = td02.innerHTML; //------------保存原始数量 td02.innerHTML = ""//清空innerHTML td02.appendChild(cloneNumEdit); //将数量编辑框追加到td02里面去 //修改第四个td里面的a标签 var td03 = editTr.children[3]; //获取第四个td/ //修改innerHTML即可 td03.innerHTML = "<a href=‘javascript:void(0)‘ onclick=‘SaveEdit(this)‘>保存</a> <a href=‘javascript:void(0)‘ onclick=‘ ExitEdit(this)‘>取消</a>" } //保存修改的方法 function SaveEdit(aObj) { //根据a标签获取所在的tr var editTr = aObj.parentNode.parentNode; //还原第二个单元格 var td01 = editTr.children[1]; //获取第二个单元格 td01.innerHTML = td01.children[0].value;//获取里面select标签的value值 //将value值设置给单元格的innerHTML //还原第三个单元格 var td02 = editTr.children[2]; //获取第三个单元格 // td div span 当然可以用id拿 td02.innerHTML = td02.children[0].children[1].innerHTML; //获取里面的span的innerHTML将 innerHTML设置给第三个单元格 //还原第四个单元格 var td03 = editTr.children[3];//获取第四个单元格 td03.innerHTML = "<a href=‘javascript:void(0)‘ >删除</a> <a href=‘javascript:void(0)‘onclick=‘IntoEdit(this)‘>编辑</a>"; } //推出编辑的方法 function ExitEdit(aObj) { //根据a标签获取所在的tr var editTr = aObj.parentNode.parentNode; //还原第二个单元格 editTr.children[1].innerHTML = oldFoodName;//还原原始菜名 //还原第三个单元格 editTr.children[2].innerHTML = oldFoodNum;//还原原始 //还原第四个单元格 editTr.children[3].innerHTML = "<a href=‘javascript:void(0)‘ >删除</a> <a href=‘javascript:void(0)‘onclick=‘IntoEdit(this)‘>编辑</a>"; }</script>网页换肤
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="http://www.mamicode.com/css/01.css" rel="stylesheet" id="cssLink" /></head><body> <ol> <li class="skinChange" style="background-color: red">1</li> <li class="skinChange" style="background-color: yellow">2</li> <li class="skinChange" style="background-color: blue">3</li> <li class="skinChange" style="background-color: green">4</li> </ol> <div id="picDiv"></div> <input type="button" /></body></html><script type="text/javascript"> var liObjs = document.getElementsByClassName("skinChange"); for (var i = 0; i < liObjs.length; i++) { liObjs[i].onclick = function () { //获取link标签cssLink var linkObj = document.getElementById("cssLink"); switch (this.innerHTML) { case "1": linkObj.href = "http://www.mamicode.com/css/0" + i + ".css"; break; case "2": linkObj.href = "http://www.mamicode.com/css/02.css"; break; case "3": linkObj.href = "http://www.mamicode.com/css/03.css"; break; case "4": linkObj.href = "http://www.mamicode.com/css/04.css"; break; } } } alert(liObjs[0].onclick); //li标签.onclick() //function () { // //获取link标签cssLink // var linkObj = document.getElementById("cssLink"); // switch (this.innerHTML) { // case "1": // linkObj.href = "http://www.mamicode.com/css/0" + i + ".css"; // break; // case "2": // linkObj.href = "http://www.mamicode.com/css/0" + i + ".css"; // break; // case "3": // linkObj.href = "http://www.mamicode.com/css/0" + i + ".css"; // break; // case "4": // linkObj.href = "http://www.mamicode.com/css/0" + i + ".css"; // break; // } </script>简单页面登陆JS特效
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title></head><body> <input type="text" id="userName" value="http://www.mamicode.com/请输入用户名" style="color: #c8c1c1" /> <br /> <input type="text" id="userPass" value="http://www.mamicode.com/请输入密码" style="color: #c8c1c1" /></body></html><script type="text/javascript"> //用户名框获得焦点事件 document.getElementById("userName").onfocus = function () { // alert(this.style.color); if (this.value.trim() == "请输入用户名") { //清空自己的文本 this.valuehttp://www.mamicode.com/= ""; //修改自己的字体颜色 this.style.color = "black"; } } //用户名失去焦点事件 document.getElementById("userName").onblur = function () { if (this.value.trim()=="") { //还原文本, this.valuehttp://www.mamicode.com/= "请输入用户名"; //还原样式 this.style.color = "#c8c1c1"; } } //密码框获得焦点事件 document.getElementById("userPass").onfocus = function () { // alert(this.style.color); if (this.value.trim() == "请输入密码") { //清空自己的文本 this.valuehttp://www.mamicode.com/= ""; //修改自己的字体颜色 this.style.color = "black"; //修改type this.type = "password"; } } //密码框失去焦点事件 document.getElementById("userPass").onblur = function () { if (this.value.trim() == "") { //还原文本, this.valuehttp://www.mamicode.com/= "请输入用户名"; //还原样式 this.style.color = "#c8c1c1"; //还原type this.type = "text"; } } </script>计时器和定时器
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title></head><body> <input type="button" value="http://www.mamicode.com/开启定时器" id="timeOpen" /> <input type="button" value="http://www.mamicode.com/关闭定时器" id="timeClose" /> <input type="button" value="http://www.mamicode.com/开启计时器" id="interOpen" /> <input type="button" value="http://www.mamicode.com/关闭计时器" id="interClose" /></body></html><script type="text/javascript"> function eatFood(foodName, bedName) { alert("中午吃" + foodName + "在" + bedName + ",睡觉觉"); } function sleep(){ alert("zzzZZZZZ"); } //-------------分割线 var timeOutId;//定时器id //定时器,延迟调用,只调用一次,延迟时间单位是毫秒 document.getElementById("timeOpen").onclick = function () { //同时接收定时器id timeOutId = window.setTimeout(eatFood, 2000, "鸡腿饭,叉烧双拼", "课桌上"); } //关闭定时器的方法 通过id document.getElementById("timeClose").onclick = function () { window.clearTimeout(timeOutId); } var interId; //计时器,延迟调用,会一直执行,传参的方式 跟定时器一样 document.getElementById("interOpen").onclick = function () { //同时接收定时器id interId = window.setInterval(sleep, 1000); } //通过id关闭计时器 document.getElementById("interClose").onclick = function () { //同时接收定时器id interId = window.clearInterval(interId); }</script>自动切换图片
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> div { border: 1px solid #0094ff; margin: 0 auto; } #divImg { width: 300px; height: 192px; } #divInfo { width: 300px; height: 30px; margin-top:5px; } li { float: left; height: 15px; width: 25px; text-align: center; line-height: 15px; background-color:#ffd800; margin-left:2px; color:#ff0000; } ol { list-style: none; margin:0px; padding:0px; } </style></head><body> <div id="divImg" style="position:relative"> <div style="position:absolute;right:0px;bottom:0px;border:none;padding:0px;margin:0px"> <ol> <li key="button1">1</li> <li key="button2">2</li> <li key="button3">3</li> <li key="button4">4</li> </ol> </div> </div> <div id="divInfo"></div></body></html><script type="text/javascript"> //图片信息数据存储 var imgInfoArr = [ { "key": "button1", "imgPath": "/img/1.jpg", "imgInfo": "两个小loli" }, { "key": "button2", "imgPath": "/img/2.jpg", "imgInfo": "嫦娥本月" }, { "key": "button3", "imgPath": "/img/3.jpg", "imgInfo": "美女与野兽" }, { "key": "button4", "imgPath": "/img/4.jpg", "imgInfo": "学生装cosplay" } ]; //为数据对象绑定方法--面向对象 //循环判断传入的key 符合哪一个,返回符合的对象 imgInfoArr.GetObjByKey = function (key) { for (var i = 0; i < this.length; i++) { if (this[i].key == key) { return this[i]; } } } //---------------上面是准备数据下面是绑定方法 //获取所有的li标签 var liObjs = document.getElementsByTagName("li"); //为li标签绑定点击事件--通过dom元素.getAttribute("属性名")可以获取自定义属性 for (var i = 0; i < liObjs.length; i++) { liObjs[i].onclick = function () { //获取自定义属性 key var myKey = this.getAttribute("key"); //通过key去获取对象 var imgInfoObj = imgInfoArr.GetObjByKey(myKey); //将对象的属性设置给 图片div 还有文字div //修改背景图片 document.getElementById("divImg").style.backgroundImage = "url(" + imgInfoObj.imgPath + ")"; //修改文字 document.getElementById("divInfo").innerHTML = imgInfoObj.imgInfo; } } //全局变量--li标签 索引 var liIndex = 0; //开启计时器,自动调用图片切换方法 setInterval(autoClick, 2000); //手动调用 自动点击方法.让第一个li标签被点击 autoClick(); //封装的方法, function autoClick() { //手动调用li标签的点击事件 liObjs[liIndex].onclick(); //所应增加,并且判断是否越界 liIndex++; liIndex = liIndex > 3 ? 0 : liIndex; } ////根据key获取 对象的方法 //function GetImgObj(key) { // for (var i = 0; i < imgInfoArr.length; i++) { // if (imgInfoArr[i].key == key) // { // return imgInfoArr[i]; // } // } //} //var someObj=GetImgObj("button3"); //alert(someObj.key+"|"+someObj.imgPath+"|"+someObj.imgInfo); </script>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> //window.onclick = function () { // alert("你点击了页面"); //} //页面资源加载完毕 //html+css+js解析完毕 //图片,视频,音频,加载完毕 window.onload = function () { alert("资源加载完毕"); document.getElementById("12"); //haha = document.getElementById("123"); //给body加点击事件 //body的作用域,跟他的大小有关, //body的本质是一个div,大小跟自己内部的元素有关 //所有要让整个页面都为时间触发区域,就添加给window对象 document.body.onclick = function () { alert("你点击了body"); } } </script></head><body style="background-color:#00e0ff;border:1px solid #0094ff;"> <br /> <br /> <br /></body></html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> alert("稍等一会"); //获取当前页面的地址--window.location可读可写 //alert(window.location); //window.location = "http://www.baidu.com"; //关闭打开页面 //window.close(); //打开新的页面不常用.了解即可 //window.open("p04登录页面demo.html"); //为window对象添加鼠标移动事件 window.onload = function () { //window添加鼠标移动事件 window.onmousemove = function () { //alert("123"); //window.innerHeight 获取显示区域的尺寸 document.getElementById("showInfo").value = http://www.mamicode.com/window.innerHeight +"|" + window.innerWidth; } } </script></head> <body> <input type="text" id="showInfo" /></body></html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> //window.parent获取父窗体 //window.top获取顶级窗体 window.onload = function () { //为按钮1添加点击事件 document.getElementById("btnFather").onclick = function () { //自己 父窗体 window.parent.document.body.style.backgroundColor = "orange"; } document.getElementById("btnTop").onclick = function () { // window.top.document.body.style.backgroundColor = "pink"; window.parent.parent.document.body.style.backgroundColor = "pink"; } } </script></head><body style="background-color: #0094ff"> <h1>我是最底层的页面</h1> <input type="button" value="http://www.mamicode.com/修改父窗体颜色" id="btnFather" /> <input type="button" value="http://www.mamicode.com/修改顶级窗体颜色" id="btnTop" /></body></html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title></head><body style="background-color:#ffdb00"> <h1>我是parent页面 </h1> <iframe src="http://www.mamicode.com/p09_self.html"></iframe></body></html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title></head><body style="background-color:#f00"> <h1>我是top页面</h1> <iframe src="http://www.mamicode.com/p09_parent.html" style="height:500px;width:500px;"></iframe></body></html>
创建Table的快捷方式
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> table { border:1px solid #0094ff; border-collapse:collapse; width:400px; margin:0 auto; } td { border:1px solid #0094ff; text-align:center; } </style> <script type="text/javascript"> var foodArr = [ { "name": "杨枝甘露", "price": 15 }, { "name": "天地一号", "price": 5 }, { "name": "特仑苏", "price": 8 }, { "name": "脉动", "price": 4 } ] window.onload = function () { //村代码生成table var tbList = document.createElement("table");//创建table //循环对象数组,生成行列 for (var i = 0; i < foodArr.length; i++) { var trCreate = tbList.insertRow();//快速插入tr 同时放回tr的引用 for (var item in foodArr[i]) { var tdCreate = trCreate.insertCell();//快速插入td 同时返回引用 tdCreate.innerHTML = foodArr[i][item]; } } document.body.appendChild(tbList); //table加到dom树里面去 } </script></head><body></body></html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> //window linux macos //window对象里面的 navigator的 属性可以获取一些系统信息,浏览器信息等 //alert(window.navigator.platform); //window.screen/ //availHeight浏览器可用显示区域 美工可以根据浏览器的显示大小,对页面进行优化 // alert(window.screen.availHeight + "||" + window.screen.availWidth); //历史记录 history.length 获取历史记录的长度 alert(window.history.length); </script></head><body> <a href="http://www.mamicode.com/p12historyLength.html">点击跳转</a></body></html>
JavaScript初探 三
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。