html近期所学

最新推荐文章于 2021-03-31 22:26:50 发布

我yi癫狂

最新推荐文章于 2021-03-31 22:26:50 发布

阅读量119

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/weixin_43560272/article/details/91591014

版权

Html 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

导航栏（新学的，，，，，其实就是简单的href）
css
开门大吉
 轮播样式

js
css
js1
js1
js1
js1
js1
js7

首先是css

开门大吉

改只需其中的gif

  <html>
	<head>
	<style>
	section{
		width: 361px;
		height: 247px;
		border: red 1px solid;
		margin: 100px auto;
		background:url(erha.gif);
		position: relative;
	}
	
	.l,.r{
		position: absolute;
		top:0;
		width:50%;
		height:100%;
		background-color: red;
		transition:all 1s;
	}
	
	.l{
		left:0;
		border:1px solid #000;
		transform-origin: left;
	}
	
	.r{
		right:0;
		border:1px solid #000;
		transform-origin: right;
	}
	
	section:hover .l{
			transform: rotateY(-130deg);
	}
	
	section:hover .r{
			transform: rotateY(-130deg);
	}
	
	</style>
	</head>
	<body>
	<section>
		<div class="l"></div>
		<div class="r"></div>
	
	</section>
	</body>
</html>

在这里插入图片描述

轮播样式

<html>
	<style>
	ul{
	list-style:none;
	}
	
	div{
		width: 318px;
		height: 500px;
		border: 1px solid #ccc;
		margin: 50px auto;
		padding: 5px auto;
		position: relative;
	}
	
	.l{
		position:absolute;
		top: %50;
		margin-top: -250px;
		left:0;
		
	}
	
	.r{
		position:absolute;
		top: %50;
		margin-top: -250px;
		right:0;
	}
	
	.circle{
		 width:65px;
		 height: 13px;
		 background-color:;
		 
		 position:absolute;
		margin-top: -14px;
		left: 50%;
		margin-left: -55px;
		
	}
	
	.circle li{
		width:9px;
		height: 9px;
		background-color: #B7B7B7;
		float: right;
		margin: 2px;
		border-radius: 50%;
		background: rgba(0,0,0,0.5);
	}
	
	.circle .current{
		background-color: #f40;
	}
	</style>
<body>
	<div>
	<img src="2.jpg" height="500" >
	<img src="left.png"	width="40" height="40" class="l" >
	<img src="right.png" width="30" height="40" class="r">
	<ul class="circle">
		<li class="current"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	<ul>
	</div>
</body>
</html>

随便找的图
在这里插入图片描述

js

账户密码获取

<html>
	<title>show</title>
<body>
	<form method="get" action="xxx.php">
	<input type="txt" name="username" value="">
	<input type="password" name="word" value="">
	<input type="submit" name="sub" >
	</form>
</body>
</html>

xxx.php

<?php
	echo '<pre>';
	
	var_dump($_REQUEST);

回车发送命令（按键）

<html>
<head>
<meta charset="utf8">
<style>
#count{
	width:200px;
	height:100px;
	border:black solid 1px;
}
</style>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.js"></script>
</head>

<body>
<div>
<input type="button" id="btn" value="点我">
<input type="text" id="txt" value="">

</div>
<div id="count">
	
</div>
 <script>
	document.onkeydown = function(e){
		if(e.keyCode==13)
		{
			count.innerHTML = txt.value;
		}
	}
	
	btn.onclick = function(){
		count.innerHTML = txt.value;
	}
 </script>
</body>



</html>

计时器

<html>
<head>
<meta charset="utf8">
<style>
#count{
	width:200px;
	height:100px;
	border:black solid 1px;
}
</style>
<link rel="stylesheet" href="css/bootstrap.css">
</head>

<body>
<div>
<input type="button" id="btn" value="点我">
</div>
<div id="count">
	<span>
	<span>
</div>
 <script>
	var a=document.getElementById('btn');
	var b=document.getElementById('count');
	var timer =null;
	var count=0;
	
	b.innerHTML=count;
	timer = function tip(){
		
		count++;
		b.innerHTML=count;
	}
	
	a.onclick=function(){
	setInterval(timer,1000);
	}
	
 </script>
</body>


<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.js"></script>
</html>

通过按钮实现清屏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload=function(){
document.getElementById("btn").onclick=function(){displayDate()};


function displayDate(){
txt.value="我喜欢你";
}
}

</script>
</head>
<body>
<input id="txt" value="">
<button id="btn">清屏</button>




</body>
</html>

选项卡（轮播图原型）

<html>
<head>
<meta charset="utf8">
<style>
#div1 div{
width:200px;
height:200px;
border:black solid 2px;
display: none;
}

#div1 .active{
background:red;
}
</style>
<link rel="stylesheet" href="css/bootstrap.css">
</head>

<body>
<div id="div1">
	 <input id="btn1" class="active" type="button" value="农药资讯">
	 <input id="btn2" type="button" value="前方消息">
	 <input id="btn3" type="button" value="最新报道">
	 <input id="btn4" type="button" value="聊天">
	 
	 <div style="display:block;">21123</div>
	 <div >321231</div>
	 <div >231321</div>
	 <div>54654321</div>
 </div	>
 

 
 
 <script>
	 var oDiv=document.getElementById("div1");
	 var aBtn=div1.getElementsByTagName("input");
	 var aDiv=div1.getElementsByTagName("div");


	for(var i=0;i<aBtn.length;i++)
	{	
		aBtn[i].index=i;
		aBtn[i].onclick=function()
		{	
			for(var i=0;i<aBtn.length;i++)
			{
			aBtn[i].className="none";
			aDiv[i].style.display="none";
			}
			this.className="active";
			aDiv[this.index].style.display='block';
		}
		
		
		
		
	}
 </script>
</body>


<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.js"></script>

</body>
</html>

阶乘

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
//点击btn触发函数事件
window.onload=function()
{
document.getElementById("btn").onclick=function(){add()	}
};

//定义一个阶乘的函数
function add()
{
	
	var i,j=1;
	for(i=1;i<=txt.value;i++)
	{
	j=j*i;
	}
	txt1.value=j;
}

</script>
</head>
<body>
<input id="txt" value="">
<button id="btn">的阶乘是</button>
<input id="txt1" value="">




</body>
</html>

密码一致登录

<html>

<body>

<input type="password" id="password" name="password" value="登 录"/>
加个按钮
<input name="a" type="submit" value="登 录" onclick="checkpassword();"/>

</body>
<script>
 function checkpassword(){
 var pwd="1234567";//你和朋友约定的密码，写死的
 var inpwd=document.getElementById("password").value;//获取输入的代码
 if(pwd == inpwd){ //判断一下是否一样
 window.location.href="img1.html";
 }
}
alert(inpwd);
</script>

</html>

Top

我yi癫狂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html近期所学

导航栏（新学的，，，，，其实就是简单的href）css开门大吉轮播样式jscssjs1js1js1js1js1js7首先是css开门大吉改只需其中的gif <html> <head> <style> section{ width: 361px; height: 247px; border: red 1px sol...
复制链接

扫一扫

专栏目录