事件和几个JavaScript实例

一： js：
ECMAScript：语法语句
BOM：
DOM：文档对象模型：

事件：
onclick：鼠标点击事件：
ondblclick：鼠标双击事件：
onchange：值改变事件：
onsubmit：必须要有返回值：
onfocus：获得焦点事件：　
onblur：失去焦点事件：
鼠标悬浮： onmouseover
鼠标移开：　onmouseout：
onkeyup：键盘弹起事件：
oninput：输入框值改变事件：

下面几个小例子：
动态显示时间：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><span id="span"></span><input type="button" name="" id="" value="" onclick="getTimeFun();" /><script type="text/javascript">//获得当前的时间： window.onload= function(){window.setInterval("getTimeFun()",1000);}function getTimeFun(){var date= new Date();var strDate = date.toLocaleString();// document.write(strDate);var spanEle = document.getElementById("span"); spanEle.innerHTML= strDate; }</script><label id="ab"></label></body>
</html>

图片的隐藏和显示：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="button" name="" id="" value="showFun" onclick="showFun()";/><input type="button" name="" id="" value="showFun" onclick="hiddenFun()";/><img id="img1" src="../img/10.jpg" style="display: none;"  /><script type="text/javascript">var imgEle = document.getElementById("img1"); function showFun(){imgEle.style.display = "block"; }function hiddenFun(){
//				var imgEle = document.getElementById("img1"); imgEle.style.display = "none"; }</script>	</body>
</html>

广告的定时弹出和隐藏：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><img id="img1" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" style="display: none;" /><script type="text/javascript">var imgEle = document.getElementById("img1"); function showFun(){imgEle.style.display = "block"; window.setTimeout("hiddenFun();",3000);}function hiddenFun(){
//				var imgEle = document.getElementById("img1"); imgEle.style.display = "none"; }window.onload= function (){//定时器： window.setTimeout("showFun()",4000);}</script></body>
</html>

轮播图:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="button" name="" id="" value="btn" onclick="changeImg();" /><img id="img1" src="../img/1.jpg"/><script type="text/javascript">window.onload= function(){window.setInterval("changeImg()",3000);}var index= 0; function changeImg(){var imgEle = document.getElementById("img1");var curIndex = index%3+1; imgEle.src= "../img/"+curIndex+".jpg";index++; }</script></body>
</html>

表格的隔行变色：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1px" width="600px" id="tab"><tr ><td><input type="checkbox" id="all" onclick="fun();"/></td><td>分类ID</td><td>分类名称</td><td>分类商品</td><td>分类描述</td><td>操作</td></tr><tr><td><input type="checkbox" name="pro" /></td><td>1</td><td>手机数码</td><td>华为,小米,尼康</td><td>黑马数码产品质量最好</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" name="pro" /></td><td>2</td><td>成人用品</td><td>充气的</td><td>这里面的充气电动硅胶的</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox"  name="pro"/></td><td>3</td><td>电脑办公</td><td>联想,小米</td><td>笔记本特卖</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" name="pro" /></td><td>4</td><td>馋嘴零食</td><td>辣条,麻花,黄瓜</td><td>年货</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" name="pro" /></td><td>5</td><td>床上用品</td><td>床单,被套,四件套</td><td>都是套子</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr></table><script>window.onload= function(){//获得表格： var tableEle = document.getElementById("tab");//获得所有的行： 
//				tableEle.getElementsByTagName("tr");//返回的是一个数组： var rowsEle = tableEle.rows;//循环遍历得到每一个行： rowsEle[0].bgColor="pink";for(var i=1; i<rowsEle.length;i++){var rowEle = rowsEle[i]; if(i%2==0){rowEle.bgColor= "yellow";}else{rowEle.bgColor= "lime";}}}/** 联动选择：*/function fun(){//alert("xx");var checkAllEle = document.getElementById("all"); if(checkAllEle.checked){//说明被选中//获得所有的： var checkedBoxesEle= document.getElementsByName("pro"); //循环遍历得到每一个： for(var i=0; i<checkedBoxesEle.length;i++){var checkEle = checkedBoxesEle[i]; checkEle.checked=true; }}else{var checkedBoxesEle= document.getElementsByName("pro"); //循环遍历得到每一个： for(var i=0; i<checkedBoxesEle.length;i++){var checkEle = checkedBoxesEle[i]; checkEle.checked=false; }}}</script></body>
</html>

商品的左右选：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1px" width="480px"><tr><td>分类名称</td><td><input type="text" value="手机数码"/></td></tr><tr><td>分类描述</td><td><input type="text" value="这里面都是手机数码"/></td></tr><tr><td>分类商品</td><td><!--左边--><div style="float: left;">已有商品<br /><select style="width:80px" multiple="multiple" id="leftSelect" ondblclick="selectOne()"><option>华为</option><option>小米</option><option>锤子</option><option>oppo</option></select><br /><a href="#" onclick="selectOne()"> &gt;&gt; </a> <br /><a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a></div><!--右边--><div  style="float: right;"> 未有商品<br /><select style="width:80px" multiple="multiple" id="rightSelect"><option>苹果6</option><option>肾7</option><option>诺基亚</option><option>波导</option></select><br /><a href="#"> &lt;&lt; </a> <br /><a href="#"> &lt;&lt;&lt; </a></div></td></tr><tr><td colspan="2"><input type="submit" value="提交"/></td></tr></table><script type="text/javascript">function selectOne(){//alert("xxx");var s1Ele = document.getElementById("leftSelect");var s2Ele = document.getElementById("rightSelect");//获得左边的所有的options： 
//				s1Ele.getElementsByTagName("option");var optionsEle = s1Ele.options;//遍历得到每一个： for(var i=0; i<optionsEle.length;i++){/**  0 4  *  1 3*  2 2*/var optionEle = optionsEle[i]; //判断是否被选中： if(optionEle.selected){//说明被选中： s2Ele.appendChild(optionEle); i--; //保证了变量的唯一}}}function selectAll(){//alert("xxx");var s1Ele = document.getElementById("leftSelect");var s2Ele = document.getElementById("rightSelect");//获得左边的所有的options： 
//				s1Ele.getElementsByTagName("option");var optionsEle = s1Ele.options;//遍历得到每一个： for(var i=0; i<optionsEle.length;i++){var optionEle = optionsEle[i]; //判断是否被选中： s2Ele.appendChild(optionEle); i--; //保证了变量的唯一}}</script></body>
</html>

二级联动：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><select id="province" name="province" style="width:80px;" onchange="selectProvince(this);"><option value="-1">请选择</option><option value="0">山东</option><option value="1">北京</option><option value="2">河北</option></select><select id="city" name="city" style="width:80px;"></select><script type="text/javascript">var arr  = [["济南市", "青岛市","潍坊市","烟台市","威海市","淄博","东营","日照","聊城","德州","菏泽" ],["东城区", "西城区","海淀区","朝阳区","丰台区","实景山","通州区","昌平区","大兴区","密云" ],["石家庄", "邯郸市","承德市","廊坊市","沧州市","秦皇岛","唐山","保定","张家口" ]];var s2Ele= document.getElementById("city");function selectProvince(obj){//alert(obj.value);var cities = arr[obj.value];//alert(cities);//遍历一维数组，获得其中的每一个值： /** 清空s2* */var optionsEle = s2Ele.options;/*	for(var i=0; i<optionsEle.length; i++){s2Ele.removeChild(optionsEle[i]);i--;}*/optionsEle.length=0;for(var i=0; i<cities.length;i++){var city= cities[i];//封装到option， 追加在s2当中： var optionEle = document.createElement("option"); //文本节点： var textNode = document.createTextNode(city); //建立关系： optionEle.appendChild(textNode); //放在s2下： s2Ele.appendChild(optionEle);//s2Ele.innerHTML= "<option>"+city+"</option>"}}</script></body>
</html>

事件和几个JavaScript实例

相关文章

官宣代言人王一博，老板电器为打开厨电增量市场提供新思路

bert实现词嵌入及其参数详解

微信小程序笔记整理

excel中添加下拉式菜单的方法

fabric-ca-client颁发Orderer节点证书

invalid sub button url domain hint 解决方法

k8s pv,pvc无法删除问题

error pulling image configuration: read tcp xxx.xxx.x.xxx:xx-＞xxx.xx.xxx.xx:xxx: read: connection