js_04 案例演示

最新推荐文章于 2024-11-04 22:26:34 发布

喔喔。

最新推荐文章于 2024-11-04 22:26:34 发布

阅读量399

点赞数 2

文章标签： java

本文链接：https://blog.csdn.net/weixin_66616840/article/details/123998425

版权

文章目录

1.复选框案例
2.随机器案例
3.文字轮播案例
4.图片轮换案例

1.复选框案例

<body>
			<table border="1px" width="500px" style="text-align: center;" align="center">
				<tr>
					<td>全选<input id="qx" type="checkbox" onclick="qx()"/></td>
					<td><input name="da" type="checkbox" onclick="checkMonthYear(this,01,4,6)"/>1月</td>
					<td><input name="da" type="checkbox" onclick="checkMonthYear(this,02,4,6)"/>2月</td>
					<td><input name="da" type="checkbox" onclick="checkMonthYear(this,03,4,6)"/>3月</td>
					<td><input name="da" type="checkbox" onclick="checkMonthYear(this,04,4,6)"/>4月</td>
					<td><input name="da" type="checkbox" onclick="checkMonthYear(this,05,4,6)"/>5月</td>
					<td><input name="da" type="checkbox" onclick="checkMonthYear(this,06,4,6)"/>6月</td>
				</tr>
				<tr>
					<td>2008年<input name="da" type="checkbox" onclick="checkMonthYear(this,2008,0,4)"/></td>
					<td><input value="200801" name="a" type="checkbox"/></td>
					<td><input value="200802" name="a" type="checkbox"/></td>
					<td><input value="200803" name="a" type="checkbox"/></td>
					<td><input value="200804" name="a" type="checkbox"/></td>
					<td><input value="200805" name="a" type="checkbox"/></td>
					<td><input value="200806" name="a" type="checkbox"/></td>
				</tr>
				<tr>
					<td>2007年<input name="da" type="checkbox" onclick="checkMonthYear(this,2007,0,4)"/></td>
					<td><input value="200701" name="a" type="checkbox"/></td>
					<td><input value="200702" name="a" type="checkbox"/></td>
					<td><input value="200703" name="a" type="checkbox"/></td>
					<td><input value="200704" name="a" type="checkbox"/></td>
					<td><input value="200705" name="a" type="checkbox"/></td>
					<td><input value="200706" name="a" type="checkbox"/></td>
				</tr>
				<tr>
					<td>2006年<input name="da" type="checkbox" onclick="checkMonthYear(this,2006,0,4)"/></td>
					<td><input value="200601" name="a" type="checkbox"/></td>
					<td><input value="200602" name="a" type="checkbox"/></td>
					<td><input value="200603" name="a" type="checkbox"/></td>
					<td><input value="200604" name="a" type="checkbox"/></td>
					<td><input value="200605" name="a" type="checkbox"/></td>
					<td><input value="200606" name="a" type="checkbox"/></td>
				</tr>
				<tr>
					<td>2005年<input name="da" type="checkbox" onclick="checkMonthYear(this,2005,0,4)"/></td>
					<td><input value="200501" name="a" type="checkbox"/></td>
					<td><input value="200502" name="a" type="checkbox"/></td>
					<td><input value="200503" name="a" type="checkbox"/></td>
					<td><input value="200504" name="a" type="checkbox"/></td>
					<td><input value="200505" name="a" type="checkbox"/></td>
					<td><input value="200506" name="a" type="checkbox"/></td>
				</tr>
			</table>
		</body>
		<script type="text/javascript">
			//全选
			function qx(){
				// 获取全选复选框
				var qx = document.getElementById("qx");
				// 获取除全选之外的其它所有复选框
				var as = document.getElementsByName("a");
				// 循环遍历das
				for(var i = 0;i<as.length;i++){
					as[i].checked = qx.checked;
				}
			}
			function checkMonthYear(obj,v,a,b){
				// 获取除全选之外的其它所有复选框
				var as = document.getElementsByName("a");
				// 开始循环遍历as
				for(var i = 0;i < as.length;i++){
					// 获取每个复选框的value属性值
					var va = as[i].value;
					// 没有设置value属性的时候，获取该复选框的value属性值则是 on
					if(va != 'on'){
						// 进一步的筛选出1月所对应的四个复选框
						// 截取 va的最后两个数字(下标：4,6)，如果是01则是1月所对应的复选框
						var str = va.substring(a,b);// 截取月份下标：4,6；截取年份下标：0,4
						if(str == v){
							// 把 obj对象的 checked属性值赋给复选框的 checked属性
							das[i].checked = obj.checked;
						}
					}
				}
			}
		</script>

2.随机器案例

<body>
		<div>
		<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" onClick="mystart();" value="开始"/></td><td>
		<input type="button" onClick="mystop();" value="停止" /></td></tr></table></td></tr>
		</table>
		</div>
	</body>
	<script>
	function myrandom()
	{
		var names = ["哈哈","花花","豆豆","坨坨","堆堆","哦哦","美羊羊","懒洋洋"];
		var a1=Math.round(Math.random()*(names.length-1));
		var b1=Math.round(Math.random()*(names.length-1));
		var c1=Math.round(Math.random()*(names.length-1));
		document.all["a"].innerHTML=names[a1];
		document.all["b"].innerHTML=names[b1];
		document.all["c"].innerHTML=names[c1];
		
	}
	function mystart()
	{
		 timera=setInterval('myrandom()',20);
		}
	function mystop() {
	    
		    clearInterval(timera);
	}
	</script>

3.文字轮播案例

<body onload="show()">
				<!-- 展示文字 -->
				<div id="da"></div>
		</body>
		<script type="text/javascript">
			var i = 1;// 表示截取的结束下标
			function show(){
				var str = "这是一个充满挑战与机遇的时代，请尽情拼搏吧!!!!";
				// 一个一个截取 str里面的文字
				var sa = str.substring(0,i);
				document.getElementById("da").innerHTML = sa;
				if(i == str.length){//当ｉ的值叠加到str的最大长度的时候再重新从第一个字截取
					i = 0;
				}
				// 更新i的值
				i++;
				setTimeout("show()",200);
			}
			
		
		</script>

4.图片轮换案例

<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="p"/>
				</td>
			  </tr>
			  </table>
		</body>
		<script type="text/javascript">
			function changeImage(na){
				// 获取img标签
				var img = document.getElementById("p");
				// 修改img的src属性
				// 修改标签的属性值
				// 1.方式一：标签对象.属性名="值";
				// img.src="img/"+na;
				// 2.方式二：标签对象.setAttribute("属性名","属性值");
				// Attribute属性
				// img.getAttribute();
				img.setAttribute("src","img/"+na);
				
			}
		
		</script>