JavaScript实现效果

最新推荐文章于 2023-12-05 18:02:12 发布

Mr顺

最新推荐文章于 2023-12-05 18:02:12 发布

阅读量1.4k

点赞数 2

分类专栏：网页设计

本文链接：https://blog.csdn.net/qq_46144237/article/details/111147179

版权

网页设计专栏收录该内容

9 篇文章 2 订阅

订阅专栏

JavaScript实现效果

动态文字

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>	
</head>
<body>
		<input type="button" value="跑起来" onclick="dong();">
		<input type="button" value="停止" onclick="stop();">
		<h2 id="hmsg">Hello JavaScript！</h2>
	<script type="text/javascript">
	var msg=document.getElementById("hmsg").innerText;
	var intervalId=null;
	function dong(){
		       if(intervalId!=null) return;
                  // 获取到第一个字符
                function dong1(){
                var start=msg.substring(0,1);
				// 获取后面的所有字符
				var end=msg.substring(1);
				msg=end+start;
				document.getElementById("hmsg").innerText=msg;
                }
                intervalId=setInterval(dong1,400);	
			}			
	function stop(){
				clearInterval(intervalId);  //清除定时器，并不是置为null
				intervalId=null;
			}
	</script>
</body>
</html>

三级联动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<select  id="province">
		<option value="-1">请选择省份</option>     
	</select>
	<select  id="city">
		<option value="-1">请选择城市</option> 
	</select>
	<select  id="district">
		<option value="-1">请选择区</option> 
	</select>
	<script>
	//利用数组保存数据
	//保存省份的数组
	var provinceArr=["河南省","江苏省","河北省"];
	//保存城市的数组
	var cityArr=[["郑州市","洛阳市","开封市"],["苏州市","南京市","扬州市"],["石家庄","秦皇岛","张家口"]];
	//保存区域数组
	var districtArr=[
		[
		  ["中原区","二七区","惠济区","金水区"],
		  ["涧西区","瀍河区","西宫区","吉利区"],
		  ["龙亭区","顺河回族区","鼓楼区","禹王台区"]
		],
		[
		  ["吴中区","相城区","姑苏区","吴江区"],
		  ["鼓楼区","玄武区","建邺区","秦淮区"],
		  ["广陵区","邗江区","江都区"]
		],
		[
		  ["新华区","桥西区","长安区","裕华区"],
		  ["海港区","山海关区","北戴河区","抚宁区"],
		  ["桥西区","桥东区","崇礼区","万全区"]
		]
	]
	//创建省份下拉菜单
	function createOption(obj,data){
		for(var i in data){
			var op=new Option(data[i],i);
			obj.add(op);
		}
	}
	var province=document.getElementById("province");
	createOption(province,provinceArr);
	var city=document.getElementById("city");
	province.onchange=function(){
		city.options.length=0;
		createOption(city,cityArr[province.value]);
		if(province.value>=0)  city.onchange();
        else location.reload(); 
	}
	var district=document.getElementById("district");
	city.onchange=function(){
		district.options.length=0;
		createOption(district,districtArr[province.value][city.value]);
	}
	</script>
</body>
</html>

时间倒计时

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1 align=center>2022年北京冬季奥运会</h1>
	<p align=center>距离2022年2月4日还有<span id="time"></span></p>
</body>
<script language=JavaScript> 
var now = new Date();             
function currenttime() 
{ 
var dtime = new Date("02/04/2022");    
now.setTime(now.getTime()+100); 
days = (dtime - now) / 1000 / 60 / 60 / 24;    
daysRound = Math.floor(days); 
hours = (dtime - now) / 1000 / 60 / 60 - (24 * daysRound);    
hoursRound = Math.floor(hours); 
minutes = (dtime - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);    
minutesRound = Math.floor(minutes); 
if(minutesRound<=9)
minutesRound="0"+minutesRound
seconds = (dtime - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.floor(seconds); 
if(secondsRound<=9)
secondsRound="0"+secondsRound
time.innerHTML = daysRound + "天" +hoursRound + "小时" + minutesRound + "分" + secondsRound + "秒";    
}
setInterval("currenttime()",100); 
//-->
</script>
</html>

Mr顺

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript实现效果

JavaScript实现效果动态文字三级联动时间倒计时动态文字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <input type="button" value="跑起来" onclick="dong();"> <inpu
复制链接

扫一扫