JavaScript实例第十四天

最新推荐文章于 2024-07-28 20:27:10 发布

APinBom

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量70

点赞数

分类专栏：前端Javascript实例文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_51649346/article/details/121119950

版权

前端Javascript实例专栏收录该内容

20 篇文章 0 订阅

订阅专栏

2021.11.3

实例一、计算时间差

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>计算时间差</title>
</head>

<body>
	<div>
	<label>第一个时间(2019-01-08 10:10:10):</label><!-- lable多用于和另一个表单元素绑定，for可把label绑定到另外一个元素 -->
		<input type="text" name="time1" id="id-time-1">
	<label>第二个时间(2019-01-10 22:22:22):</label>
		<input type="text" name="time2" id="id-time-2"><br>
		<input type="button" value="计算" onClick="calTimeInterval()">
		<span id="id-time-interval"></span>
	</div>
</body>
	<script type="text/javascript">
	function calTimeInterval(){
		var time1=document.getElementById("id-time-1")
		var time2=document.getElementById("id-time-2")
		var t1=parseTime(time1);
		var t2=parseTime(time2);
		var span=ti.getTime()-t2.getTime()//返回时间，格式为
		console.log(span)
		span=Math.abs(span/1000);
		document.getElementById("id-time-interval").innerText="相差:"+span
		
	}
		function parseTime(str){
			var date=str.split("")[0];
			var darr=date.split("-");
			var time=str.split(" ")[1];
			var tarr=time.split(":");
			var y=parseInt(darr[0]);
			var m=parseInt(darr[1]);
			var d=parseInt(darr[2]);
			var h=parseInt(darr[0]);
			var mm=parseInt(darr[1]);
			var s=parseInt(darr[2]);
			return new Date(y,m,d,h,mm,s);
		}
	</script>
</html>

实例二、网页标题体现月进度

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题体现月进度</title>
</head>

<body>
	<div>
	<span id="id-span-date"></span>
	</div>
</body>
	<script type="text/javascript">
	window.onload=function(){
		var strTitle;
		var date=new Date();
		var d=date.getDate();//返回当前月份的天数
		if(d<10){
			strTitle="上旬"
		}
		if(d>=10&&d<=20){
			strTitle="中旬"
		}
		if(d>=20){
			strTitle="下旬"
		}
		document.title=strTitle;
		var today=date.toLocaleDateString();//返回本地当天的时间,2021/11/3
		document.getElementById("id-span-date").innerText="今天:"+today;
		
		
	}
	
	</script>
</html>

实例三、用表格制作日历

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用表格制作日历</title>
</head>

<body>
	<div>
	<p>
		点击选择日历:
		<select id="y"></select>年
		<select id="m"></select>月
		</p>
		<table width="500" height="500" border="1" align="center" id="id-tb-date"></table><!-- 定义一个空盒子用来显示日历 -->
		<span id="id-span-info"></span>
	</div>
</body>
	<script type="text/javascript">
	window.onload=function(){
		var y=document.getElementById("y");
		var m=document.getElementById("m");
		var strY="";
		for(let i=2019;i<=2020;i++){
			strY+='<option value="'+i+'">'+i+'</option>'
			
		}
		y.innerHTML=strY;
		strM="";
		for(let j=1;j<=12;j++){
			strM+='<option value="'+j+'">'+j+'</option>'
		}
		m.innerHTML=strM;
	}
		m.onchange=function(){//当月份发生改变时
			var year=document.getElementById("y").value;
			year=parseInt(year);
			var month=parseInt(this.value);
			var days=31;
			if(isRunYear(year)&&month==2){
				days=29
				
			}
			else if(!isRunYear(year)&&month==2){
				days=28;
			}
			else if(month==4||month==6||month==9||month==11){
				days=30
				
			}
			var arrweek=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
			var strW='<tr>';//行
			for(var w=0;w<7;w++){
				strW+='<td>星期:'+arrweek[w]+'</td>'
			}
			var strW='</tr>';
			var date=new Date(year,month-1,1);
			var week=date.getDay();//返回一周中的某一天
			if(week==7)
				week=0;
			var j=1;
			while(true){
				strW+='<tr>'
				for(var i=0;i<7;i++){
					if(j==1&&i==week){
						strW+='<td οnclick="showDay(this,'+j+','+i+')">1</td>'
						j++
					}
					else if(j>1&&j<=days){
						strW+='<td οnclick="showDay(this,'+j+','+i+')">+j+</td>'

						j++
					}
					else{
						strW+='<td>&nbsp;</td>'
					}
					strW+='</tr>'
					if(j>days)
						break;
				}
				document.getElementById("id-tb-date").innerHTML=strW
				
				
			}
				
		}
		function isRunYear(y){
			return y%4==0
		}
		function showDay(el,d,w){
			console.log(el);
			setTbBgColor(el);
			var y=document.getElementById("y").value;
			var m=document.getElementById("m").value;
			var arrW=['日','一','二','三','四','五','六']
			var strW="星期";
			for(var i=0;i<7;i++){
				if(i==w){
					strW+=arrW[i]
					break;
				}
			}
			var strInfo="您选择的日期是:"+y+"年"+m+"月"+d+"日"+strW+".";
			document.getElementById("id-span-info").innerText=strInfo;
		}
		function setTbBgColor(el){
			var tds=document.getElementsByTagName("td");
			for(var i=0;i<tds.length;i++){
				tds[i].style.backgroundColor="gray"
			}
			el.style.background="gray"
			
		}
	
	</script>
</html>

日期显示涉及的算法和正则表达式好麻烦，更更改改花了太多时间，明天开始写网页特效

APinBom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实例第十四天

2021.11.3实例一、计算时间差<!doctype html><html><head><meta charset="utf-8"><title>计算时间差</title></head><body> <div> <label>第一个时间(2019-01-08 10:10:10):</label><!-- lable多用于和另一个表单元素绑定，for
复制链接

扫一扫

专栏目录