投稿
  1. 极客之音首页
  2. 后端漫谈

第六章 BOM编程 ② 代码

seven_ • • 后端漫谈 • 阅读 211

导读：本篇文章讲解 第六章 BOM编程 ② 代码，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

1.改变背景颜色

代码如下：

<!DOCTYPE html>
<html>
	<head>
	<title> my page </title>
	<style type="text/css">

	</style>

		<script type="text/javascript">
		//1.排除法

		var colorAry = ["red","green","blue","orange","pink","purple"];
		var i=0;
		function changeColor(){
			//alert(123);	
			
			for(var i=0;i<colorAry.length;i++){
				document.body.style.backgroundColor=colorAry[i];
			}
			
			/*if(document.body.style.backgroundColor=="red"){
				document.body.style.backgroundColor="green";
			}else if(document.body.style.backgroundColor=="green"){
				document.body.style.backgroundColor="blue";
			}else{
				document.body.style.backgroundColor="red";
			}*/
		}
		</script>
	</head>

运行结果如下：
#pic_center

2.下拉框切换修改地址栏，跳转页面

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title> my page </title>
		<style type="text/css">
	
		</style>
	
		<script type="text/javascript">
			//下拉框切换修改地址栏，跳转页面
			function changeSite(){
				//获取下拉框对象
				var selWebSite = document.getElementById("webSite");
				
				//如果选项是空值
				if(selWebSite.value==""){
					//函数返回，不再继续向下执行(终止函数执行)
					return;
				}
	
				//获取当前选中的值
				//alert(selWebSite.value);
				//使用地址栏对象跳转页面
				//跳转目标页面（有历史）
				//window.location.href=selWebSite.value; 
				//用目标页面替换当前页面(无历史)
				//window.location.replace(selWebSite.value);
				window.location.reload();//重新刷新当前页面
			}
		</script>
	</head>

	<body>
		<!--
		onchange:下拉选项切换事件
		-->
		<select id="webSite" onchange="changeSite()">
		<option value="">请选择</option>
		<option value="http://www.baidu.com">百度</option>
		<option value="http://www.bilibili.com">B站</option>
		<option value="http://www.jd.com">京东</option>
		</select>
	</body>
</html>

运行结果如下：
#pic_center

3.弹出删除框

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title> my page </title>
		<style type="text/css">

		</style>

		<script type="text/javascript">
			function del(){
				var res = confirm("确定要删除么?");
				document.write("你选择了:"+res)
				if(res){
				
				}else{
				
				}
			}
		</script>
	</head>

	<body>
		<button type="button" onclick="del()">删除</button>
	</body>
</html>

运行结果如下：
#pic_center

4.定时器函数

图片、代码的路径如下如所示：

代码如下：

<!DOCTYPE html>
<html>
	<head>
	<title> my page </title>
		<style type="text/css">

		</style>

		<script type="text/javascript">
			//定时器函数
			//window.setTimeout(函数名,延迟时间): 延迟指定时间(ms毫秒)执行一次函数
			//window.setTimeout("函数名()",延迟时间): 延迟指定时间(ms毫秒)执行一次函数
			//window.setTimeout(function(){},延迟时间): 延迟指定时间(ms毫秒)执行一次函数

			//window.setInterval(函数名,时间间隔):每隔指定时间执行一次函数
			//window.setInterval("函数名()",时间间隔):每隔指定时间执行一次函数
			//window.setInterval(function(){},时间间隔):每隔指定时间执行一次函数

			function test(){
				alert(123);
			}

			//test();

			//延迟3秒(3000毫秒)执行一次
			//setTimeout(test,3000);
			//setTimeout("test()",3000);
			/*setTimeout(function(){
				alert(123);
			},3000)*/

			//每隔3秒(3000ms)执行一次
			//setInterval(test,3000);
			//setInterval("test()",3000);
			/*setInterval(function(){
				alert(124)
			},100);*/

		</script>
	</head>

	<body>

	</body>
</html>

运行结果如下：
#pic_center

5.电子时钟

图片、代码的路径如下如所示：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title> my page </title>
		<style type="text/css">

		</style>

		<script type="text/javascript">
			//电子时钟
			function showTime(){
				//获取系统当前时间
				var d = new Date();
				//clock.innerHTML=d.toString();
				//获取年
				var year = d.getFullYear();
				//获取月
				var mon = d.getMonth()+1; //0-11
				//获取日
				var day = d.getDay();
				//获取时
				var h = d.getHours();
				//获取分
				var m = d.getMinutes();
				//获取秒
				var s = d.getSeconds();

				clock.innerHTML=year+"年"+mon+"月"+day+"日 "+h+":"+m+":"+s;

				//嵌套调用
				//t=setTimeout(showTime,1000);
			}

			//setTimeout(showTime,1000);

			//setInterval(showTime,100);

			var t;
			function startTime(){
				//setTimeount:会返回定时器对象，存储到t中
				//t = setTimeout(showTime,1000);
				t = setInterval(showTime,1000);
			}

			function stopTime(){
				//清除定时器对象
				//clearTimeout(t);
				//这个方法和clearTimeout效果一样，可以混用
				clearInterval(t);
			}
		</script>
	</head>
	
	<body onload="showTime()">
		<button type="button" onclick="startTime()">开始</button>
		<button type="button" onclick="stopTime()">停止</button>
		<div id="clock"></div>
	</body>
</html>

运行结果如下：
#pic_center

6.发送验证码

图片、代码的路径如下如所示：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> my page </title>
		<style type="text/css">

		</style>

		<script type="text/javascript">
			//1.点击按钮按钮不可用
			//2.按钮上出现10s倒计时
			//3.倒计时结束，按钮恢复可用

			function sendCode(){
				//设置按钮元素禁用
				btnSend.disabled=true;
				var i=10;
				//每隔1s调用一次
				var t = setInterval(function(){
							//大于0做正常的提示
							if(i>=0){
								btnSend.value="发送验证码("+i+"s)";		
								i--;
							}else{
								//小于0就停止
								clearInterval(t);
								//恢复按钮可用
								btnSend.disabled=false;
								//恢复内容
								btnSend.value="发送验证码";
							}
						},1000);
				
			}
		</script>
	</head>

	<body>
		验证码:
		<input type="text" />
		<input type="button" 
			 id="btnSend" 
			 value="发送验证码"
			 onclick="sendCode()"
			 />
	</body>
</html>

运行结果如下：
#pic_center

7.绑定文档单击事件 控制上下左右

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title> my page </title>
		<style type="text/css">

		</style>

		<script type="text/javascript">

			//绑定文档单击事件
			document.onclick=function(x){
			//获取IE的事件对象
			//var e = window.event;
			//获取触发事件的目标元素
			//alert(e.srcElement)
			//设置鼠标点击的位置
			//mydiv.innerHTML=e.clientX+" "+e.clientY;

			//W3C事件对象:
			//在与事件绑定的函数的参数中定义变量(名字随便起),当事件发生时，
			//浏览器会自动将事件对象传入该变量
			//获取w3c时间对象的目标元素
			//alert(x.srcElement);
			}

			//键盘按下
			document.onkeydown=function(e){
			//e.key:字符 e.keyCode:编码
			//alert(e.key);
			mydiv.innerHTML=e.key+" "+e.keyCode;
			//获取按键的键值
			switch(e.keyCode){
				case 37: //向左
					break;
				case 38: //向上
					break;
				case 39: //向右
					mydiv.style.left=(mydiv.offsetLeft+10)+"px";
					break;
				case 40: //向下
					break;
				
			}
			}
		</script>
	</head>

	<body>
		<div id="mydiv" style="border:1px solid red;width:100px;height:100px;position:absolute;left:100px;top:100px">
		这是一个DIV
		</div>
		<p id="myp" style="border:2px solid black;width:50px;height:50px;">
		这是一个P
		</p>
		<button type="button" id="btn">这是一个button</button>
	</body>
</html>

运行结果如下：
#pic_center

v

8.飞镖 setInterval()

图片、代码的路径如下如所示：

代码如下：

<!DOCTYPE html>
<html>
 <head>
  <title> my page </title>
  <style type="text/css">
	#fb{
		width:100px;
		height:50px;
		background-color:red;
		left:10px;
		top:100px;
		position:absolute;
	}
  </style>

  <script type="text/javascript">
	var speed = 10;
	function move(){
		var oldLeft = fb.offsetLeft;
		if(oldLeft>window.screen.width){
			clearInterval(t);
			return;
		}
		speed*=1.1;
		fb.style.left=(oldLeft+speed)+"px";
	}

	var t;
	function send(){
		t=setInterval(move,40);
	}
  </script>
 </head>

 <body>
  <input type="button" value="发送" onclick="send()"/>
  <div id="fb"></div>
 </body>
</html>

运行结果如下：
#pic_center

一、table表格 背景

图片、代码的路径如下如所示：

代码如下：

// A code block
var foo = 'bar';

运行结果如下：
#pic_center

一、table表格 背景

图片、代码的路径如下如所示：

代码如下：

// A code block
var foo = 'bar';

运行结果如下：
#pic_center

一、table表格 背景

图片、代码的路径如下如所示：

代码如下：

// A code block
var foo = 'bar';

运行结果如下：
#pic_center

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/118164.html

赞 (0)
seven_的头像seven_bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！