js中比较实用的函数用法

<table id="table">
　　<tr>
　　　　<th>用户ID</th>
　　　　<th>用户名</th>
　　　　<th>手机号码</th>
　　　　<th>状态</th>
　　　　<th>操作</th>
　　</tr>
　　<tr>
　　　　<td>zhangsan</td>
　　　　<td>张三</td>
　　　　<td>13888888888</td>
　　　　<td>可用</td>
　　　　<td>
　　　　　　<span onclick="updateRow(1)">修改</span>      点击修改调用updateRow(num)函数，将num赋值为1
　　　　　　<span onclick="deleteRow(1)">删除</span>        点击删除调用deleteRow(num)函数，将num赋值为1
　　　　</td>
　　</tr>
　　<tr>
　　　　<td>zhangsan</td>
　　　　<td>张三</td>
　　　　<td>13888888888</td>
　　　　<td>可用</td>
　　　　<td>
　　　　　　<span onclick="updateRow(2)">修改</span>
　　　　　　<span onclick="deleteRow(2)">删除</span>
　　　　</td>
　　</tr>
　　<tr>
　　　　<td>zhangsan</td>
　　　　<td>张三</td>
　　　　<td>13888888888</td>
　　　　<td>可用</td>
　　　　<td>
　　　　　　<span onclick="updateRow(3)">修改</span>
　　　　　　<span onclick="deleteRow(3)">删除</span>
　　　　</td>
　　</tr>
</table>

function deleteRow(num){
　　var table = document.getElementById("table");
　　var row = table.rows[num];
　　var isDel = confirm("确定要删除吗？");     通过将confirm的值赋给isDel来判断点击的是那个键
　　if(!isDel){     　　　　　　　　　　　　　　isDel的值为假，执行if结束函数。
　　　　alert("取消删除！");
　　　　return;
　　}

　　for (var i=0;i<row.cells.length;i++) {           
　　　　row.cells[i].style.cssText = "text-decoration: line-through;color:#929292;" 　点击确定将被删除行每一个单元格文字样式改掉
　　}

　　row.cells[row.cells.length-1].lastElementChild.removeAttribute("onclick");       移除本行最后一个单元格的onclick属性
　　row.cells[row.cells.length-1].firstElementChild.removeAttribute("onclick");　　 移除本行最后一个单元格的onclick属性
　　row.lastElementChild.firstElementChild.innerHTML = "修改";
　　row.setAttribute("contenteditable","false");    将本行contenteditable属性改为false，不能修改。
}

function updateRow(num){
　　var table = document.getElementById("table");
　　var row = table.rows[num];
　　var spanText = row.cells[row.cells.length-1].firstElementChild;

　　if(spanText.innerText=="修改"){      如果本行最后一个单元格里的内容是修改，执行if将其改为完成，除最后一个单元格内容可修改
　　　　spanText.innerText="完成";

　　　　for (var i=0;i<row.cells.length-1;i++) {
　　　　　　row.cells[i].setAttribute("contenteditable","true");
　　　　}

　　}else{
　　　　spanText.innerText="修改";       如果本行最后一个单元格里的内容是完成，执行else将其改为修改，单元格内容不可修改
　　　　for (var i=0;i<row.cells.length-1;i++) {
　　　　　　row.cells[i].setAttribute("contenteditable","false");
　　　　}
　　}
}
　　var isAlt = 0;
　　var isEnt = 0;   键位判断
　　document.onkeydown = function(e){
　　　　if(e.keyCode==18){
　　　　　　isAlt = 1;    按下的是alt
　　　　}
　　　　if(e.keyCode==13){
　　　　　　isEnt = 1;　　按下的是enter
　　　　}
　　var table = document.getElementById("table");
　　var rows = table.rows;
　　if(isEnt==1&&isAlt==0){  只按enter本行修改完成，将修改改成完成，contenteditable改为false。
　　　　for (var i=1;i<rows.length;i++) {
　　　　　　for (var j=0;j<rows[i].cells.length-1;j++) {
　　　　　　　　rows[i].cells[j].setAttribute("contenteditable","false");
　　　　　　}
　　　　　　rows[i].lastElementChild.firstElementChild.innerText
　　　　　　="修改";
　　}
　　}else if(isEnt==1&&isAlt==1){   enter 和alt同时按，换行。
　　　　document.activeElement.innerHTML = document.activeElement.innerHTML+"<br/>";
　　}
}

　　document.onkeyup = function(e){   键盘抬起，令isEnt ，isAlt=0，上方if全不满足，按键失效。
　　　　if(e.keyCode==13){
　　　　　　isEnt = 0;    
　　　　}else if(e.keyCode==18){
　　　　　　isAlt = 0;
　　　　}
}

以上js实现的效果：点击修改使前四列成为可编辑状态，点击删除弹出提示是否删除，点击回车结束修改状态，修改状态点击完成结束修改状态使表格不能修改。

js实现banner图切换

<div id="banner">
　　<div id="inside"><img src="img/banner1.png" id="img1" /><img src="img/banner2.png" id="img2" /><img src="img/banner3.png" id="img3" /><img 　　　　src="img/banner4.png" id="img4" /><img src="img/banner1.png" id="img5" />    这样写是为了img之间没有空隙
　　</div>

　　<ul id="bannerNum">  　　　　　　点击相应的1，2，3，4调用changeBanner(num1)函数，将num赋值为1，2，3，4.
　　　　<li onclick="changeBanner(1)">1</li>
　　　　<li onclick="changeBanner(2)">2</li>
　　　　<li onclick="changeBanner(3)">3</li>
　　　　<li onclick="changeBanner(4)">4</li>
　　</ul>
</div>

js函数：

var num = 1;　　定义全局变量num和inside
var inside;
window.onload = function(){   用于让banner图自动切换的函数

　　inside = document.getElementById("inside");

　　var interval = setInterval(function(){    每2秒执行一次此函数
　　　　inside.style.transition = "all 1s ease";
　　　　num++;　　　　　　　　　　　　　　每执行一次函数让num+1；
　　　　switch (num){　　　　　　　　　　　根据num的值判断此时应做的改变，因为图宽1920px，所以每执行一次函数让banner的div向左走1920px。
　　　　　　case 1:
　　　　　　　　inside.style.transition = "none";   
　　　　　　　　inside.style.marginLeft = (-960)+"px";
　　　　　　break;
　　　　　　case 2:
　　　　　　　　inside.style.marginLeft = (-960-1920)+"px";
　　　　　　break;
　　　　　　case 3:
　　　　　　　　inside.style.marginLeft = (-960-1920*2)+"px";
　　　　　　break;
　　　　　　case 4:
　　　　　　　　inside.style.marginLeft = (-960-1920*3)+"px";
　　　　　　break;
　　　　　　case 5:
　　　　　　　　inside.style.marginLeft = (-960-1920*4)+"px";
　　　　　　　　num = 0;       banner图轮完一遍，让num归0，banner的div回归第一张图居中的状态。
　　　　　　break;
　　　　　　default:
　　　　　　break;
　　　　}
　　},2000);
}

　　function changeBanner(num1){   通过调用时赋给num1 的值判断应显示第几张图改变相应的div的margin-left值
　　　　inside.style.transition = "none";
　　　　switch (num1){
　　　　　　case 1:
　　　　　　　　inside.style.marginLeft = (-960)+"px";
　　　　　　break;
　　　　　　case 2:
　　　　　　　　inside.style.marginLeft = (-960-1920)+"px";
　　　　　　break;
　　　　　　case 3:
　　　　　　　　inside.style.marginLeft = (-960-1920*2)+"px";
　　　　　　break;
　　　　　　case 4:
　　　　　　　　inside.style.marginLeft = (-960-1920*3)+"px";
　　　　　　break;
　　　　　　default:
　　　　　　break;
　　}

　　num = num1-1;

}

发表新评论：

<div id="outside">
　　<h3>最新评论</h3>

　　<div id="comment">
　　　　<div id="comment1" class="comment1">
　　　　　　腾讯网友
　　　　　　<span>李二狗</span>
　　　　　　<time>2010年10月5日 19:21:12</time>
　　　　　　<p>
　　　　　　　　公务员好啊！可以为人民服务！
　　　　　　</p>
　　　　</div>
　　</div>

　　<h4>发表评论</h4>

　　<div id="addComment">
　　　　昵&nbsp;&nbsp;&nbsp;&nbsp;称：<input type="text" id="name" />
　　　　<br /><br />
　　　　评论内容:<textarea id="comContent"></textarea>

　　　　<button onclick="addComment()">提交评论</button>
　　</div>
</div>

js函数写法：

　　var idNum = 1;   
　　function addComment(){
　　　　idNum++;         用2，3，4……来给新增的每一行命名不同的id。
　　　　var inputValue = document.getElementById("name").value;  　　　　　取到在昵称一栏中输入的内容赋值给inputValue
　　　　var textValue = document.getElementById("comContent").value;　　 　取到在评论一栏中输入的内容赋值给textValue

　　　　if(inputValue==""||textValue==""){      判断输入是否为空，如果为空，弹窗提示函数结束。
　　　　　　alert("昵称和评论内容不能为空！！");
　　　　　　return;
　　　　}

　　　　var comContent1 = document.getElementById("comment1");    取到评论一一行，
　　　　var newComment = comContent1.cloneNode(true);    复制评论一和它的所有子元素，
　　　　newComment.setAttribute("id","comment"+idNum);　　将新的评论的id改为comment+相应的idNum值，
　　　　newComment.getElementsByTagName("span")[0].innerText = inputValue;    将所复制的新的评论的span内容改为取到的昵称一栏的内容，即inputValue
　　　　newComment.getElementsByTagName("p")[0].innerText = textValue;　　     将所复制的新的评论的p内容改为取到的评论一栏的内容，即textValue

　　　　var commentDiv = document.getElementById("comment");　　取到评论div的父容器，将新评论div插入到该父容器的最后，成为它的最后一行。
　　　　commentDiv.appendChild(newComment);

　　　　document.getElementById("name").value = "";  提交评论后将输入内容清空
　　　　document.getElementById("comContent").value = "";

}