博客列表 >Javascript第三篇——倒计时

Javascript第三篇——倒计时

温度的博客
温度的博客原创
2019年03月29日 17:58:12690浏览

全选:

实例

<input type="checkbox" id="checkall" onclick="checkall()"><label for="checkall">全选</label>
<input type="checkbox" name="item" id="item1"><label for="item1">选项一</label>
<input type="checkbox" name="item" id="item2"><label for="item2">选项二</label>
<input type="checkbox" name="item" id="item3"><label for="item3">选项三</label>
<input type="checkbox" name="item" id="item4"><label for="item4">选项四</label>
<input type="checkbox" name="item" id="item5"><label for="item5">选项五</label>
<input type="checkbox" name="item" id="item6"><label for="item6">选项六</label>
<script type="text/javascript">
//全选
	function checkall(){
		var check = document.getElementById("checkall");
		var item = document.getElementsByName("item");
		for(i=0;i<item.length;i++){
			if(check.checked){ //如果全选的checked为true,item的checked均为true
				item[i].checked = true;
			}else{
				item[i].checked = false;
			}
		}
	}
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

随机颜色:

实例

<button onclick="bg_color()">随机body色</button>
<script type="text/javascript">
//随机色
	function bg_color(){
		var color = '#';
		var color2 = Math.floor(Math.random()*10)+''+Math.floor(Math.random()*10);
		var color3 = Math.floor(Math.random()*10)+''+Math.floor(Math.random()*10);
		var color4 = Math.floor(Math.random()*10)+''+Math.floor(Math.random()*10);
		color +=color2+color3+color4;
		console.log(color);
		document.getElementsByTagName('body')[0].style.background=color;
	}
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

倒计时:

实例

<p>还有 <span style="color: red;font-size: 50px" id="down">5</span> 秒跳转到<a href="https://hewenlu.top">temperature</a></p>
<script type="text/javascript">
//倒计时
	
	var downspan = document.getElementById('down');
	var i=4; //声明全局变量i,
	function down(){
		if(i>0){ //当i大于0,就把i赋值给span,达到倒计时效果
			downspan.innerHTML=i;
			i--;
			console.log(i);
		}else{	  //小于0时,就是倒计时完成跳转新链接
			window.location.href="https://hewenlu.top/";
		}
	}

	setInterval("down()",1000);
	//setInterval  方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
	//方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议