JS随机数&&轮播图&&文字轮播效果

最新推荐文章于 2024-05-10 08:50:53 发布

萧磊y

最新推荐文章于 2024-05-10 08:50:53 发布

阅读量1.2k

点赞数 2

本文链接：https://blog.csdn.net/m0_63223374/article/details/123999119

版权

JavaScript 随机数轮播图文字轮播 DOM操作

关键词由CSDN通过智能技术生成

随机数&&轮播图&&文字轮播效果

1.随机数
2.轮播图
3.文字轮播效果

1.随机数

随机数进去之后就是这个效果了
点击开始之后这些就开始随机变动数字
点击停止就会把随机数显示在三个xx上面
在这里插入图片描述

//CSS里面写以下代码
<style type="text/css">
			.as {
				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>
		
//HTML里面写一个表格布置它的格式
<table align="center">
			<!-- 第一行:存放随机数产生的数字 -->
			<tr>
				<td id="mydiva" class="as">X</td>
				<td id="mydivb" class="as">X</td>
				<td id="mydivc" class="as">X</td>
			</tr>
			<!-- 第二行:开始&&停止按钮 -->
			<tr>
				<td colspan="3" align="center">
					<table>
						<tr>
							<td>
								<input onclick="mstart()" type="button" value="开始" />
							</td>
							<td>
								<input onclick="mstop()" type="button" value="停止" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
//接下来就开始写JS代码了
<script type="text/javascript">
		/*
					input 赋值：.value
					div、td赋值：.innerHTML
				*/
				// 开始
				var s;
				function mstart(){
					// 定义一个名字数组
					var names = ["1","2","3","4","5","6","7","8","9"];// 0-8   因为数组的下标是从0开始的
					// 随机数  round:四舍五入
					var sa = Math.round(Math.random() * 8);
					var sb = Math.round(Math.random() * 8);
					var sc = Math.round(Math.random() * 8);
					// 把随机产生的数字赋给单元格 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>
	</script>

2.轮播图

运行后就是这样的
点击几就会出现对应的图片
在这里插入图片描述


//CSS代码
//这里是设置一些样式的
<style type="text/css">
			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>
		
//写HTML代码
//这里写一个表格
<table width="360">//给他设置一个宽度
			<tr>
				<td style="height: 190px;">//这里给他设置一个高
					<div id="apDiv1">
						<a onmouseover="image('1.gif')" href="javascript:changeImage('1.gif')">1</a>
						<a onmouseover="image('2.gif')" href="javascript:changeImage('2.gif')">2</a>
						<a onmouseover="image('3.jpg')" href="javascript:changeImage('3.jpg')">3</a>
						<a onmouseover="image('4.jpg')" href="javascript:changeImage('4.jpg')">4</a>
						<a onmouseover="image('5.gif')" href="javascript:changeImage('5.gif')">5</a>
					</div>
					<!-- 图片 -->
					<img src="img/1.gif" alt="图片1" id="photo">
				</td>
			</tr>
		</table>

//这里是JS代码了

<script type="text/javascript">
		function image(im){
			//获取img标签
			var img=document.getElementById("photo");
			//修改img的src属性
			//修改标签的属性值
			//1.方式一：标签对象.属性名="值";
			img.src="img/"+im;
			//2.方式二：标签对象.setAttribute("属性名","属性值")；
			//Attribute属性
			img.setAttribute("src","img/"+im);
			//img.getAttribute();
			
		}
	</script>

3.文字轮播效果

这里的效果就是文字会一个一个显示出来，全部显示完就会自动重复执行

//先在HTML里面写字一个div用来保存文字
<body onload="fa()">
		<!-- 要展示的文字 -->
		<div id="da">

		</div>
	</body>
		
//后面直接上JS代码
<script type="text/javascript">
		var i = 1; //表示截取的结束下标
		function fa() {
			var str = "这是一个离不开网络的时代，请大家跟紧时代的列车！！！";
			// 一个一个截取 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>