JS--BoM案例演示

最新推荐文章于 2022-04-22 11:58:10 发布

zhaoji1346790

最新推荐文章于 2022-04-22 11:58:10 发布

阅读量158

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/zhaoji1346790/article/details/124000823

版权

JS--BoM案例演示

案例1：随机数
案例2：图片轮换
案例3：文字展示``

案例1：随机数

	<html>
		<head><title>随机数</title></head>
		<style>
		.tda{float:left;width:187px; height:115px; font-family:"微软雅黑"; background-color:#666; text-align:center; line-height:115px; font-size:80px;margin:10px; }
			input{width:180px; height:65px; display:block; background-color:#F60;border:0; cursor:pointer; font-family:"微软雅黑";  font-size:40px;font-size:100%;}
			</style>
				<script>
			function myrandom()
		{
			var a=Math.round(Math.random()*9);
			var b=Math.round(Math.random()*9);
			var c=Math.round(Math.random()*9);
			document.all["mydiva"].innerHTML=a;
			document.all["mydivb"].innerHTML=b;
			document.all["mydivc"].innerHTML=c;
	
		}
			function mstart()
			{
			timera=setInterval('myrandom()',10);
		}
			function mstop() {
    
			clearInterval(timera);
		}
			</script>
		<body>
		<div>
		<table align="center">
		<tr><td id="mydiva" class="tda">X</td><td  id="mydivb" class="tda">X</td><td id="mydivc" class="tda">X</td></tr>
		<tr><td colspan="3" align="center"><table><tr><td>
		<input type="button" onClick="mstart();" value="开始"/></td><td>
		<input type="button" onClick="mstop();" value="停止" /></td></tr></table></td></tr>
		</table>
		</div>
	</body>	
</html>

案例2：图片轮换

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{
				font-size: 14px;
				color: #39F;
				height: 18px;
				width: 20px;
				border: 1px solid #39F;
				text-decoration: none;
				display: block;
				float: left;
				margin-right:5px;
				text-align: center;
				background-color: #FFF;
				line-height: 20px;
			}
			a:hover {
				font-size: 14px;
				font-weight: bold;
				color: #FFF;
				background-color: #39F;
				border: 1px solid #39F;
				text-decoration: none;
				display: block;
			}
			#apDiv1 {
				position:absolute;
				width:180px;
				height:25px;
				z-index:2;
				left:100px;
				top: 13px;
			}
		</style>
	</head>
	<body>
		<table width="360" border="0" cellspacing="0" cellpadding="0">
		  <tr>
		    <td style="height:190px;">
				<div id="apDiv1">
					<a onmouseover="changeImage('1.gif')" href="javascript:changeImage('1.gif')">1</a>
					<a onmouseover="changeImage('2.gif')" href="javascript:changeImage('2.gif')">2</a>
					<a onmouseover="changeImage('3.jpg')" href="javascript:changeImage('3.jpg')">3</a>
					<a onmouseover="changeImage('4.jpg')" href="javascript:changeImage('4.jpg')">4</a>
					<a onmouseover="changeImage('5.gif')" href="javascript:changeImage('5.gif')">5</a>
				</div>
				<!-- 图片 -->
				<img src="img/1.gif" alt="图片" id="photo"/>
			</td>
		  </tr>
		  </table>
	</body>
	<script type="text/javascript">
		function changeImage(na){
			// 获取img标签
			var img = document.getElementById("photo");
			// 修改img的src属性
			// 修改标签的属性值
			// 1.方式一：标签对象.属性名="值";
			img.src="img/"+na;
			// 2.方式二：标签对象.setAttribute("属性名","属性值");
			img.setAttribute("src","img/"+na);
		}
	
	</script>
</html>

案例3：文字展示``

<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8" />
		<title>展示文字</title>
	</head>
	<body  onload="fa()">
		<div id="da"> </div>
	</body>
	<script type="text/javascript">
		var i = 1;// 表示截取的结束下标
		
		function fa(){
			var str = "这是一个最好的时代，也是一个最坏的时代";
			var sa = str.substring(0,i);		// 一个一个截取 str里面的文字
			// 赋给div
			document.getElementById("da").innerHTML = sa;
			if(i == str.length){//当ｉ的值叠加到str的最大长度的时候再重新从第一个字截取
				i = 0;
			}
			//更新i的值
			i++;
			setTimeout("fa()",270);
		}
	</script>
</html>