代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="btn">
<script type="text/javascript">
btn.onchange=function()//当text内的字符串发生改变时按下enter就触发(((改变事件)))
{
alert(this.value);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="btn">
<span id="spn"></span>
<script type="text/javascript">
btn.oninput=function()//当在text内打字的时候同步在text外的span标签内出现内容
{
spn.innerHTML=this.value;
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="checkbox" checked>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
div
{
width: 200px;height: 200px;background: black;
}
</style>
</head>
<body>
<input type="color" id="btn1">
<input type="color" id="btn2">
<div id="div1"></div>
<script type="text/javascript">
btn2.oninput=btn1.oninput=function()
{
div1.style.background="-webkit-linear-gradient(" btn1.value "," btn2.value ")";
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="date">
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input type="email">
<input type="submit" value="提交">
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div
{
width: 50px;height: 50px;background: red;
}
</style>
</head>
<body>
<input type="file" id="btn">
<div id="div1"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="image" src="21312.jpg">
<input type="button" id="btn2">
<script type="text/javascript">
btn2.onclick=function()
{
console.log(typeof Number(btn2.value));
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type='number' id='btn'>
<input type='number' id='btn3'>
<input type='button' id='btn2'>
<script type="text/javascript">
btn2.onclick=function()
{
alert(typeof Number(btn.value));
}
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<label>
<input type='radio' name='a'>
aaaa
</label>
<label>
<input type='radio' name='a'>bbbb
<label>
<label>
<input type='radio' name='a'>cccc
<label>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title><style type="text/css">
div{width: 50px;height: 50px;background: black;}
</style>
</head>
<body>
<input type="range" id="btn"><div id='div1'></div>
<script type="text/javascript">
btn.oninput=function()
{
div1.style.width=this.value "px";
}
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width: 50px;height: 50px;background: black;}
</style>
</head>
<body>
<form>
用户：<input name='user'><br>
密码：<input type='password' name='pass'><br>
<input type='reset' id='btn'>
<input type='submit' id='btn'>
</form>
<script type="text/javascript">
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="search">
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://localhost:8888/1.php" method="get">
用户:<input name='user'>
密码:<input name='pass'>
<input type='submit' value='提交'>
</form>
<script type="text/javascript">
btn.onchange = function(){
spn.innerHTML = this.value;
//alert(this.value)
}
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width: 50px;height: 50px;background: black;}
</style>
</head>
<body>
<input type='tel'>
<script type="text/javascript">
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form >
<input type='url'>
<input type='submit' value='提交'>
</form>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type='week'>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*p~ul选择器 p之后出现的所有ul。*/
div{width: 100px;height: 100px;background: #ccc;border: 1px solid black;
transition:0.3s;
}
div:after{
content:'111';
}
input:nth-child(2):checked~div/*~的意思是input:nth-child(2):checked之后出现的所有的div*/
{
width: 300px;height: 300px;
border-radius: 50%;
}
div:nth-child(2):checked~div:after
{
content: "222";
}
input:nth-child(3):checked~div{
width: 120px;height: 99px;
border-radius: 20%;
box-shadow: 0 0 5px black;
background: green;
}
input:nth-child(3):checked~div:after{
content: '333';
}
input:nth-child(4):checked~div:after{
content: '444';
}
</style>
</head>
<body>
<input type='radio' name='a' checked>
<input type='radio' name='a'>
<input type='radio' name='a'>
<input type='radio' name='a'>
<div></div>
<div></div>
</body>
</html>
