JavaScript实现效果
程序员文章站
2022-03-11 09:11:52
JavaScript实现效果动态文字三级联动时间倒计时动态文字Document
动态文字
<!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>
本文地址：https://blog.csdn.net/qq_46144237/article/details/111147179
上一篇： MongoDB 插入文档
下一篇： 前端实现html页面导出为word文档