<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
width: 800px;
height: 200px;
border: 1px solid #000;
}
div {
position: relative;
}
button {
width: 80px;
position: absolute;
left: 727px;
top: 207px;
}
ul{
width: 750px;
}
li{
list-style: none;
border-bottom: 1px solid #000;
line-height: 30px;
}
</style>
</head>
<body>
<div class="main">
<textarea class="content" name="" id="" cols="30" rows="10" style="resize: none;"></textarea>
<button>提交</button>
</div>
<ul>
</ul>
</body>
<script>
window.onload = function () {
var btn = document.querySelector("button");
btn.onclick = function () {
var ul = document.querySelector('ul');
var content = document.querySelector(".content").value;
var li = document.createElement("li");
var text = document.createTextNode(content);
li.appendChild(text);
ul.appendChild(li);
}
}
</script>
</html>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top{
background-color: #000;
color: #fff;
width: 673px;
height: 50px;
}
.top ul{
padding: 0;
}
.top li{
float: left;
list-style: none;
padding-left: 80px;
padding-right: 80px;
line-height: 50px;
text-align: center;
}
.mid li{
list-style: none;
border-bottom: 1px dotted #aaa;
line-height: 50px;
}
.zhong{
display: block;
}
.nozhong{
display: none;
}
.topys{
background-color: #aaa;
}
</style>
</head>
<body>
<div class="main">
<div class="top">
<ul>
<li class="lis">热门排行</li>
<li class="lis">美图速递</li>
<li class="lis">前沿科技</li>
</ul>
</div>
<div class="mid">
<ul class="item">
<li>1111111111111111111111111</li>
<li>1111111111111111</li>
<li>111111111111111111111111</li>
<li>1111111111111111111111</li>
</ul>
<ul class="item">
<li>鹅鹅鹅教官 这所中学样的冬雨成了网红</li>
<li>最伤身体的是个生活习惯一定要避开</li>
<li>12岁孩子带着父亲去西藏 吃住行自己拿主意</li>
<li>16岁男孩暑假干了量月工地 练出满身及肉 置为赚学费</li>
</ul>
<ul class="item">
<li>格好高和讴歌和宫内红花沟啊哈孤儿关机恶哦啊哈</li>
<li>11111111111111111111</li>
<li>111111111111111111</li>
<li>111111111111111111111111</li>
</ul>
</div>
</div>
<script>
window.onload=function(){
var top=document.querySelector('.top');
var lis=document.querySelectorAll('.lis');
var items=document.querySelectorAll('.item');
for(var i=0;i<lis.length;i++){
lis[i].setAttribute('index',i);
lis[i].onmouseenter=function(){
for(var i=0;i<lis.length;i++){
lis[i].className="";
}
this.className="topys";
for(var i=0;i<lis.length;i++){
items[i].style.display='none';
}
items[this.getAttribute('index')].style.display='block';
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 400px;
height: 300px;
background-color: skyblue;
}
.top {
background-color: royalblue;
text-align: center;
margin-bottom: 30px;
}
input {
width: 250px;
height: 38px;
margin-left: 75px;
}
button {
width: 250px;
height: 38px;
background-color: royalblue;
margin-left: 75px;
}
.tishi,
.mtishi {
height: 30px;
color: red;
}
p {
margin: 0;
padding-left: 75px;
}
</style>
</head>
<body>
<div class="main">
<div class="top">
<h1>注册</h1>
</div>
<form action="">
<input type="text" id="username" placeholder="请输入您的用户名">
<div class="tishi"></div>
<input type="password" id="password" placeholder="请输入您的密码">
<div class="mtishi"></div>
<button id="btn">提交</button>
</form>
</div>
<script>
window.onload = function () {
var btn = document.querySelector('#btn');
btn.onclick = function () {
var iptuser = document.querySelector('#username');
var usertext = document.querySelector('#username').value;
var iptpass = document.querySelector('#password');
var passtext = document.querySelector('#password').value;
document.querySelector('.tishi').innerHTML = '';
document.querySelector('.mtishi').innerHTML = '';
var keycode = usertext.charCodeAt(0);
if (usertext.length < 6 || usertext.length > 18) {
var p = document.createElement('p');
var text = document.createTextNode("用户名长度必须为6到18位");
p.appendChild(text);
document.querySelector('.tishi').appendChild(p);
}
else if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) {
var p = document.createElement('p');
var text = document.createTextNode("用户名必须以英文字母开头！");
p.appendChild(text);
document.querySelector('.tishi').appendChild(p);
}
if (passtext.length < 6) {
var p = document.createElement('p');
var text = document.createTextNode("密码长度不能小于6位！");
p.appendChild(text);
document.querySelector('.mtishi').appendChild(p);
}
return false
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
width: 500px;
margin: 10px auto;
text-align: center;
}
td,
th {
border: 1px solid #000;
}
.bg {
background-color: #ff6500;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="select" type="radio" value="select"></input></td>
<td>张三</td>
<td>男</td>
<td>四川成都</td>
</tr>
<tr>
<td><input name="select" type="radio" value="select"></input></td>
<td>张三</td>
<td>女</td>
<td>四川成都</td>
</tr>
<tr>
<td><input name="select" type="radio" value="select"></input></td>
<td>张三</td>
<td>男</td>
<td>四川成都</td>
</tr>
<tr>
<td><input name="select" type="radio" value="select"></input></td>
<td>张三</td>
<td>男</td>
<td>四川成都</td>
</tr>
<tr>
<td><input name="select" type="radio" value="select"></input></td>
<td>张三</td>
<td>男</td>
<td>四川成都</td>
</tr>
<tr>
<td><input name="select" type="radio" value="select"></input></td>
<td>张三</td>
<td>男</td>
<td>四川成都</td>
</tr>
<tr>
<td><input name="select" type="radio" value="select"></input></td>
<td>张三</td>
<td>女</td>
<td>四川成都</td>
</tr>
</tbody>
</table>
<script src="../excise/jquery-3.6.0.min.js"></script>
<script>
$(function () {
$('tbody tr:odd').css("background", "#ffffee");
$('tbody tr:even').css("background", "#f8f18e");
$("tbody tr").mouseover(function () {
$(this).css("background", "#ff6500");
})
$("tbody tr").mouseout(function () {
$('tbody tr:odd').css("background", "#ffffee");
$('tbody tr:even').css("background", "#f8f18e");
})
$("tbody tr").click(function(){
$(this).find("input[name=select]").prop("checked",true);
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top{
width: 500px;
margin: 10px auto;
}
table{
width: 500px;
margin: 10px auto;
border-collapse: collapse;
text-align: center;
}
th,td{
border: 1px solid #000;
}
</style>
</head>
<body>
<form class="top">
查询：<input type="text" id="btn">
</form>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>王六</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李紫</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
</tbody>
</table>
<script src="../excise/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("tbody tr:odd").css("background","#ffffee");
$('tbody tr:even').css("background", "#f8f18e");
$("#btn").keyup(function(){
var txt=$("#btn").val();
$("tbody tr").hide();
$("tbody tr").filter(":contains('"+txt+"')").show();
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form{
width: 500px;
margin: 30px auto;
}
select{
border: 2px solid rgb(126, 144, 245);
}
</style>
</head>
<body>
<form action="">
<select name="province" id="province"></select>
<select name="city" id="city"></select>
</form>
<script type="text/javascript" src="./jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
var arrpro = ["请选择", "河北省", "辽宁省", "山东省"];
var arrcity = [["请选择"],["请选择", "石家庄", "邯郸", "唐山", "张家口", "廊坊"], ["请选择", "沈阳", "大连", "鞍山"], ["请选择", "济南", "青岛", "淄博", "烟台"]];
console.log(document.getElementById("one").innerHTML);
for (var i = 0; i < arrpro.length; i++) {
$("#province").append($("<option>").val(i).html(arrpro[i]));
}
$("#province").change(function () {
$("#city").empty();
for (var i = 0; i < arrcity[$(this).val()].length; i++) {
$("#city").append($("<option>").html(arrcity[$(this).val()][i]));
}
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
margin: 20px auto;
}
form {
width: 700px;
margin: 20px auto;
}
#btndiv {
width: 80px;
margin: 20px auto;
}
#line {
width: 100%;
height: 10px;
margin-top: 50px;
border-top: 1px solid #000;
}
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
margin-top: 10px;
}
th,
tr,
td {
border: 1px solid #333;
}
a {
color: blue;
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<div>添加新员工</div>
<form id="form">
name: <input type="text" id="name">
email: <input type="text" id="email">
salary: <input type="text" id="salary">
<br>
<div id="btndiv"><button>Submit</button></div>
</form>
<div id="line"></div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript" src="./jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
var name = $("#name").val();
var email = $("#email").val();
var salary = $("#salary").val();
var tr = $("<tr></tr>");
tr.appendTo("tbody");
var name = $("<td>" + name + "</td>");
name.appendTo('tbody tr:last');
var email = $("<td>" + email + "</td>");
email.appendTo('tbody tr:last');
var salary = $("<td>" + salary + "</td>");
salary.appendTo('tbody tr:last');
var del = $("<td><a class='del'>Delete</a></td>");
del.appendTo("tbody tr:last");
$(".del").click(function () {
$(this).parent().parent().remove();
})
return false
})
})
</script>
</body>
</html>
扫一扫
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
