js实战代码系列—周杰伦给你报时间+网页页签制作模板+jQuery初体验

时间:2020-10-28 作者:admin

等到下次需要用的时候,可以回来找模板用哈哈哈哈!
刚碰jQuery,今天是个好日子,明天继续学jQuery,明天也是个好日子。

目录

周杰伦给你报时间

发现了这张图和显示时间还有点相配,哈哈哈~
我伦:我是一个没有感情的报时器哈哈哈哈哈哈哈哈哈哈~~
js实战代码系列—周杰伦给你报时间+网页页签制作模板+jQuery初体验
我寻思着怎么才能让周杰伦看到我。。。
要是这篇文章能火就好了。。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>周杰伦给你报时间</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#box{
				height: 300px;
				width: 500px;
				background-image: url(../img/jay01.jpg);
				margin: 0 auto;
				/* position: absolute;
				left: 100px;
				top: 50px; */
			}
			
			#p1{
				width: 180px;
				height: 300px;
				position: relative;
				left: 0;
				top: 150px;
				color: #EEEEEE;
			}
			
		</style>
	</head>
	<body>
		<!--
			
			目标:在网页中显示当前系统的时间
			今天是2020年10月27日  星期二 14:15:00
		-->
		
		
		<div id="box">
			<p id="p1"></p>
		</div>
		
		<script type="text/javascript">
			
			
			function aa()
			{
				var now=new Date();
				var year=now.getFullYear();
				var month=now.getMonth()+1;
				var day=now.getDate();
				var week=now.getDay();
				var h=now.getHours();
				var m=now.getMinutes();
				var s=now.getSeconds();
				
				var xq=["日","一","二","三","四","五","六"];
				
				if(month<10)
				{
					month="0"+month;
				}
				
				if(day<10)
				{
					day="0"+day;
				}
				
				if(h<10)
				{
					h="0"+h;
				}
				
				if(m<10)
				{
					m="0"+m;
				}
				if(s<10)
				{
					s="0"+s;
				}
				
				
				
				var str="今天是"+year+"年"+month+"月"+day+"日  星期"+xq[week]+" "+h+":"+m+":"+s+"";
				document.getElementById("p1").innerText=str;				
			}
			
			aa();
			
			setInterval(function(){
				aa();
			},1000);
			
			
		</script>
		
		
	</body>
</html>

页签制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#tab{
				width: 600px;
				height: 300px;
				border: solid 1px #ccc;
				margin: 100px;
				overflow: hidden;   /* 超出的部分隐藏 */
			}
			
			#tab ul{
				height: 35px;
				list-style: none;
			}
			
			#tab ul li{
				height: 35px;
				width:199px;
				float: left;
				border-right: solid 1px #ccc;
				text-align: center;
				line-height: 35px;
				border-bottom: solid 1px #ccc;
				background: linear-gradient(to bottom,#fff,#ccc);
			}
			
			#tab ul li.current{
				background: linear-gradient(to bottom,#ccc,#fff);
				border-bottom: 0;
			}
			
			#tab div{
				display: none; /* 隐藏 */
				clear: both;    /* 清除浮动 */
			}
			#tab div.current{
				display: block; /* 对应上面的隐藏和清除浮动,这条语句是我点到谁谁就显示 */
			}
			#tab p{
				line-height: 33px;
				padding-left: 10px;
				border-bottom: dashed 1px #ccc;
			}
			a{
				color: #333;
				text-decoration: none;
			}
			
		</style>
	</head>
	<body>
		
		<div id="tab">
			<ul>
				<li class="current" id="head1" onmouseover="showitem(1);">欢迎关注</li>
				<li id="head2" onmouseover="showitem(2);">我的主页</li>
				<li id="head3" onmouseover="showitem(3);">技巧分享</li>
			</ul>
			<div class="current" id="c1">
				<p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p>
			</div>
			<div id="c2">
				<p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p>
				<p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p>
				<p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p>
				<p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p>
				<p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p>
				<p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p>
				<p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p>
				<p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p>
				<p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p>
				<p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p>
				<p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p>
				<p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p>
			</div>
			<div id="c3">
				<p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p>
				<p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p>
				
			</div>
			
		</div>
		
		<script type="text/javascript">
			function showitem(num){
				
				document.getElementById("head1").className="";
				document.getElementById("head2").className="";
				document.getElementById("head3").className="";
				// 先将head1 head2 head3 设置为空
				
				document.getElementById("head"+num).className="current";
				// num为形参,传进来的时候就从1开始,点到第一个li的时候就为head1,以此类推
				
				
				document.getElementById("c1").className="";
				document.getElementById("c2").className="";
				document.getElementById("c3").className="";
				
				document.getElementById("c"+num).className="current";
				
			}
			
			
		</script>
		
		
	</body>
</html>

附加一个倒计时:
https://blog.csdn.net/hanhanwanghaha/article/details/109265325
最后一个代码

什么是jQuery?

jQuery是一个快速,小型且功能丰富的JavaScript库。通过易于使用的API(可在多种浏览器中使用),它使HTML文档的遍历和操作,事件处理,动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性,jQuery改变了数百万人编写JavaScript的方式。

接口文档

jQuery API Document(jQuery)接口文档

https://api.jquery.com/

中文版的:https://jquery.cuishifeng.cn/

jQuery初体验

首先在js目录下新建一个js文件
js实战代码系列—周杰伦给你报时间+网页页签制作模板+jQuery初体验
然后再编辑新的名字,选择jquery,点击创建就好啦
js实战代码系列—周杰伦给你报时间+网页页签制作模板+jQuery初体验
看第29行代码,我们在执行的时候需要引入jquery库

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#aa{
				width: 1px;
				height: 20px;
				border: solid 1px palevioletred;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<!-- 
		目标:做一个动画,由一个盒子宽度为1px的变为盒子为100px宽度
		使用jq的步骤:
		第一步:先引入jq这个库;
		第二步:在页面上编写html结构;
		第三步:编写jq代码
		 
		 -->
		 
		 <div id="aa">
		 	
		 </div>
		 
		 <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
		 	$("#aa").animate({"width":"100px"},5000);
		 </script>
	</body>
</html>

相比下面这样的代码,引入这样的代码更加便捷,因为我们直接调用就好啦

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#box1{
				width: 700px;
				height: 30ox;
				border: solid 1px khaki;
				margin-top: 50px;
				margin-left: 10px;
			}
			
			#box2{
				width: 0px;
				height: 30px;
				background-color: red;
			}
			
			#box3{
				margin-left: 10px;
				color: black;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				
			</div>
		</div>
		<span id="box3">
			
		</span>
		<script type="text/javascript">
			
			var i=0;
			var timger1=setInterval(function(){
				i=i+10;
				document.getElementById("box2").style.width=i+"px";
				document.getElementById("box3").innerHTML=parseInt((i/700)*100)+"%";
				if(i>=700)
				{
					clearInterval(timger1);
				}
				
			},100);
		</script>
	</body>
</html>


期待与你的一起学习
https://blog.csdn.net/hanhanwanghaha
一个敲极无敌可爱的人欢迎你的关注。

不懂随时留言,评论也可,私信也可,看见必回。Come on baby

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。