js经典案例

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

m0_67140851

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

阅读量585

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/m0_67140851/article/details/123999844

版权

这个博客展示了如何使用HTML和JavaScript创建动态效果。第一个案例是随机数生成，通过JavaScript的Math.random()函数为三个表格单元格填充0到6之间的随机数，并设置定时器不断更新。第二个案例是图片轮换，利用onmouseover事件和setAttribute方法实现图片源的切换。第三个案例是文字展示，通过substring方法逐字显示字符串内容，形成滚动效果。

摘要由CSDN通过智能技术生成

1.随机数案例

1.代码如下：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<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>
	</head>
	<body>
		<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>
	</body>
	
	
	<script type="text/javascript">
		/*
			input 赋值：.value
			div、td赋值：.innerHTML
		*/
		// 开始
		var s;
		function mstart(){
			// 定义一个名字数组
			var names = ["0","1","2","3","4","5","6"];// 0-6
			// 随机数  round:四舍五入
			var sa = Math.round(Math.random() * 6);
			var sb = Math.round(Math.random() * 6);
			var sc = Math.round(Math.random() * 6);
			// 把随机产生的数字赋给单元格 td    
			document.getElementById("mydiva").innerHTML = names[sa];
			document.getElementById("mydivb").innerHTML = names[sb];
			document.getElementById("mydivc").innerHTML = names[sc];
			
			s = setTimeout("mstart()",10);
		}
		// 停止
		function mstop(){
			clearInterval(s);
		}
		
	</script>
	
</html>

1.2.效果图

在这里插入图片描述

2.图片轮换

2.1代码如下：

<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("属性名","属性值");
			// Attribute属性
			img.setAttribute("src","img/"+na);
			// img.getAttribute();
		}
	
	</script>
</html>

2.2效果图

在这里插入图片描述

3.文字展示

3.1代码如下

<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 = "你吃大便666";
			// 一个一个截取 str里面的文字
			var sa = str.substring(0,i);
			// 赋给div
			document.getElementById("da").innerHTML = sa;
			if(i == str.length){//当ｉ的值叠加到str的最大长度的时候再重新从第一个字截取
				i = 0;
			}
			// 更新i的值
			i++;
			
			setTimeout("fa()",300);
		}
		
	
	</script>
</html>