JS—案例

最新推荐文章于 2023-03-19 10:47:39 发布

学IT的弟弟

最新推荐文章于 2023-03-19 10:47:39 发布

阅读量57

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/m0_67188520/article/details/124000242

版权

JS—案例

一、轮播图（图片自定义）
二、随机数
三、文字轮播效果

一、轮播图（图片自定义）

/* js代码 */
/* 轮播图 */
function sf(cs){//调用方法的时候传参传图片名字就可以了
	/* 获取id */
	var a=document.getElementById("a");
	/* 赋值 */
	//a.src="img/"+cs
	a.setAttribute("src","img/"+cs);
	/* 获取 */
	var b=a.getAttribute("src");
	console.info(b);
}
/* html代码 */
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<script type="text/javascript" src="js/index.js">
		</script>
		<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="sf('1.gif')" href="javascript:sf('1.gif')">1</a>
					<a onmouseover="sf('2.gif')" href="javascript:sf('2.gif')">2</a>
					<a onmouseover="sf('3.jpg')" href="javascript:sf('3.jpg')">3</a>
					<a onmouseover="sf('4.jpg')" href="javascript:sf('4.jpg')">4</a>
					<a onmouseover="sf('5.gif')" href="javascript:sf('5.gif')">5</a>
				</div>
				<!-- 图片 -->
				<img src="img/1.gif" alt="图片" id="a"/>
			</td>
		  </tr>
		  </table>
	</body>
</html>

二、随机数

/* js代码 */
/* 随机数 */
function sd(){
	/* 定义三个随机数 */
	var a=Math.round(Math.random()*9);
	var b=Math.round(Math.random()*9);
	var c=Math.round(Math.random()*9);
	/* 赋值 */
	document.getElementById("a").innerHTML=a;
	document.getElementById("b").innerHTML=b;
	document.getElementById("c").innerHTML=c;
	/* 一直赋值 */
	s=setTimeout("sd()",100);
}
/* 停止随机数 */
function sds(){
	window.clearInterval(s);
}
/* html代码 */
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>随机数</title>
		<script type="text/javascript" src="js/index.js">
		</script>
		<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="a" class="tda">X</td>
				<td id="b" class="tda">X</td>
				<td id="c" class="tda">X</td>
			</tr>
			<!-- 第二行：两个按钮 -->
			<tr>
				<td colspan="3" align="center">
					<table>
						<tr>
							<td>
								<input type="button"  value="开始" onclick="sd()"/>
							</td>
							<td>
								<input type="button"  value="停止" onclick="sds()"/>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

三、文字轮播效果

//先在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>

学IT的弟弟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS—案例

JS—案例一、轮播图（图片自定义）二、随机数三、文字轮播效果一、轮播图（图片自定义）/* js代码 *//* 轮播图 */function sf(cs){//调用方法的时候传参传图片名字就可以了 /* 获取id */ var a=document.getElementById("a"); /* 赋值 */ //a.src="img/"+cs a.setAttribute("src","img/"+cs); /* 获取 */ var b=a.getAttribute("src");
复制链接

扫一扫