正文

py-day15_css+js_初

IP云
IP云V管理员/2 阅读
09/26
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

css+js_初

一、鼠标移动变色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 1px;
left: 1px;
top: 0;
height:48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding: 0 30px 0 30px;
color: white;
}
.pg-header .menu:hover{
background-color: blue;
}
/* .pg-header .menu:hover 当鼠标移动到当前标签时，以下css属性才生效*/
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="w">
abc
</div>
</div>
</body>
</html>

二、返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部—多层</title>
</head>
<body>
<div onclick="GoTop();"style="width: 50px;height: 40px;background-color: white;
position: fixed;
bottom: 20px;
right: 20px;
">返回顶部
</div>
<div style="height: 5000px;background-color: #dddddd;">
1234567890
</div>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
</body>
</html>

三、赋新值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">我是刘东</div>
<a>123</a>
<a>abc</a>
<a>123abc</a>
<script>
document.getElementById('i1');
document.getElementById('i1').innerText;
document.getElementById('i1').innerText = '新内容';
document.getElementsByTagName('a')[1];
document.getElementsByTagName('a')[1].innerText = '666';
tags = document.getElementsByTagName('a');
for(var i=0;i<tags.length;i++){tags[i].innerText=777;}
</script>
</body>
</html>

四、登录框内有用户密码图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 35px;width: 400px;position: relative;padding: 10px 0;">
<input type="text" style="height: 35px;width: 370px;padding-right: 30px;" />
<span style="display:inline-block;position: absolute;right: 10px;top: 20px;background-image: url(图片/i_name.jpg);height: 16px;width: 16px;"></span>
</div>
<div style="height: 35px;width: 400px;position: relative;">
<input type="text" style="height: 35px;width: 370px;padding-right: 30px;" />
<span style="display:inline-block;position: absolute;right: 10px;top: 10px;background-image: url(图片/i_pwd.jpg);height: 16px;width: 16px;"></span>
</div>
</body>
</html>

五、幻灯片循环显示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="color: red;background-color: #BEBEBE;height: 40px;">
<h1 id="i1">欢迎光临-前来指导</h1>
</div>
<script>
function liu(){
//根据ID获取指定<div>标签的内容，定于局部变量接受
var tag = document.getElementById('i1')
//获取标签内部的内容
var content = tag.innerText;
//取字符串取第一个字符，赋值给f
var f = content.charAt(0);
//把第2个字符到最后一个字符赋值给g
var g = content.substring(1,content.length);
//把两个新赋的值加在一起
var new_content = g + f;
//重新赋值
tag.innerText = new_content;
}
setInterval('liu()',500);
</script>
</body>
</html>

六、定时器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
setInterval("alert(123)",5000) //创建定时器5秒弹出一次
</script>
</body>
</html>

七、头部固定

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头部固定</title>
<style>
.pg-header{
height: 48px;
background-color:black;
position: fixed;
top:0;
right: 0;
left: 0;
}
.pg-body{
background-color:#dddddd;
height: 5000px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>

八、大图片选择按照设置的坐标显示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100px;"></div>
<div style="background-image: url(icon_18_118.png);background-repeat: no-repeat;height:20px;width: 20px;border: 1px solid red;background-position-x: 0;background-position-y: -25px"></div>
</body>
</html>

九、多层折叠显示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
z-index: 10;
}
</style>
</head>
<body>
<div>
<input type="button" value="添加" onclick="liu()" />
</div>
<!-- 遮罩层开始-->
<div id="i1" class="c1 hide"></div>
<!-- 遮罩层结束--> <!-- 弹出框开始-->
<div id="i2" class="c2 hide">
<p><input type="text" /></p>
<p><input type="text" /></p>
<p>
<input type="button" value="取消" onclick="dong()" />
<input type="button" value="确定" />
</p>
</div>
<!-- 弹出框结束-->
<script>
function liu(){
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
}
function dong(){
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide');
}
</script>
</body>
</html>

十、大图小框设置x/y选拉框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px;overflow: auto;">
<img src="1.jpg">
</div> <!-- hidden 隐藏 auto 出现上下拉框-->
</body>
</html>

十一、多层导航栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
</style>
</head>
<body>
<div style="height: 48px"></div> <div style="width: 300px"> <div class="item">
<div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div>
<div class="content">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class="item">
<div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div>
<div class="content hide">
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div>
<div class="item">
<div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div>
<div class="content hide">
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div>
<div class="content hide">
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
</div>
</div> </div> <script>
function ChangeMenu(nid){
var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for(var i=0;i<item_list.length;i++){
var current_item = item_list[i];
current_item.children[1].classList.add('hide');
} current_header.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html>

以上所有功能实现代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day15</title>
<style>
.item .header{
height: 35px;
background-color: #BEBEBE;
color: white;
line-height: 35px;
}
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
.pg-header{
height: 48px;
background-color:#BEBEBE;
color: coral;
font-family: 方正舒体;
position: fixed;
top:0;
right: 0;
left: 0;
}
.pg-body{
height: 5000px;
margin-top: 52px;
}
.diceng{
width: 35px;
height: 40px;
background-color: #BEBEBE;
position: fixed;
bottom: 20px;
right: 20px;
}
.ziti{
font-family: 方正舒体;
height:25px;
font-size: 16px;
}
.shou{
cursor: pointer;
}
</style>
</head>
<body style="margin: 0;">
<div class="pg-header" style="margin: 0 auto;margin-top: 2px;text-align: center;margin-left: 5px;margin-right: 5px">
<p><h2 id="i1">欢迎光临-前来指导&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2></p>
</div> <div class="pg-body">
<div style="height:800px;width: 300px;float: left;margin-left: 5px ">
<div class="item">
<div id='i2' class="header" onclick="ChangeMenu('i2');" style="margin-top: 5px">LINUX</div>
<div class="content">
<div>linux运维</div>
<div>Linux脚本</div>
<div>Linux监控</div>
</div>
</div>
<div class="item">
<div id='i3' class="header" onclick="ChangeMenu('i3');" style="margin-top: 5px">Python</div>
<div class="content hide">
<div>Python代码</div>
<div>Python项目</div>
<div>Python知识</div>
</div>
</div>
<div class="item">
<div id='i4' class="header" onclick="ChangeMenu('i4');" style="margin-top: 5px">Java</div>
<div class="content hide">
<div>java代码</div>
<div>Java项目</div>
<div>Java知识</div>
</div>
</div>
<div class="item">
<div id='i5' class="header" onclick="ChangeMenu('i5');" style="margin-top: 5px">all_log</div>
<div class="content hide">
<div>linux系统_log</div>
<div>Linux服务_log</div>
<div>linux监控_log</div>
</div>
</div>
</div>
<div class="ziti" style="float: left;margin-left: 200px">
<p><b>运维主机如下：</b></p>
<input type="button" value="添加" onclick="ShowModel();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" />
<input type="button" value="全选" onclick="ChooseAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" />
<input type="button" value="取消" onclick="CancleAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" />
<input type="button" value="反选" onclick="ReverseAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" /> <table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead >
<tbody id="tb"> <tr>
<td>
<input type="checkbox" />
</td>
<td >192.168.1.1</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox"f id="test" /></td>
<td>192.168.2.2</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.3.3</td>
<td>8080</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.4.4</td>
<td>8080</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.5.5</td>
<td>88</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.6.6</td>
<td>66</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.8.8</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.9.9</td>
<td>23</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.10.10</td>
<td>99</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.11.11</td>
<td>000</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.12.12</td>
<td>66</td>
</tr>
</tbody>
</table> </div> <!-- 遮罩层开始 -->
<div id="i6" class="c1 hide"></div>
<!-- 遮罩层结束 --> <!-- 弹出框开始 -->
<div id="i7" class="c2 hide">
<p><input type="text" /></p>
<p><input type="text" /></p>
<p>
<input type="button" value="取消" onclick="HideModel();"/>
<input type="button" value="确定"/>
</p>
</div>
<!-- 弹出框结束 -->
<div style="float: right;margin-right: 20px;"class="ziti" >
<p><b>服务器入口：</b></p>
<div style="height: 20px;width: 220px;position: relative;padding: 10px 0;">
<input type="text" style="height: 25px;width: 200px;padding-right: 30px;" />
<span style="display:inline-block;position: absolute;right: 10px;top: 15px;background-image: url(图片/i_name.jpg);height: 16px;width: 16px;"></span>
</div>
<div style="height: 20px;width: 220px;position: relative;">
<input type="text" style="height: 25px;width: 200px;padding-right: 30px;" />
<span style="display:inline-block;position: absolute;right: 10px;top: 10px;background-image: url(图片/i_pwd.jpg);height: 16px;width: 16px;"></span>
</div>
<div style="padding-top: 15px;float: right;">
<input type="button" value="登陆" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'"/>
</div>
</div>
<!--
<div style="height: 300px;width: 300px;overflow: auto;font-family: 方正舒体;margin-right: 5px;float: right">
<img src="1.jpg">
</div>
<!-- hidden 隐藏 auto 出现上下拉框--> </div> <div class="diceng" onclick="GoTop();">返回顶部</div> <script>
function ChangeMenu(nid){
var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for(var i=0;i<item_list.length;i++){
var current_item = item_list[i];
current_item.children[1].classList.add('hide');
} current_header.nextElementSibling.classList.remove('hide');
}
</script>
<script>
function ShowModel(){
document.getElementById('i6').classList.remove('hide');
document.getElementById('i7').classList.remove('hide');
}
function HideModel(){
document.getElementById('i6').classList.add('hide');
document.getElementById('i7').classList.add('hide');
} function ChooseAll(){
var tbody = document.getElementById('tb');
// 获取所有的tr
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
// 循环所有的tr，current_tr
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = true; }
} function CancleAll(){
var tbody = document.getElementById('tb');
// 获取所有的tr
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
// 循环所有的tr，current_tr
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = false; }
} function ReverseAll(){
var tbody = document.getElementById('tb');
// 获取所有的tr
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
// 循环所有的tr，current_tr
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} </script>
<script>
function liu(){
//根据ID获取指定<div>标签的内容，定于局部变量接受
var tag = document.getElementById('i1')
//获取标签内部的内容
var content = tag.innerText;
//取字符串取第一个字符，赋值给f
var f = content.charAt(0);
//把第2个字符到最后一个字符赋值给g
var g = content.substring(1,content.length);
//把两个新赋的值加在一起
var new_content = g + f;
//重新赋值
tag.innerText = new_content;
}
setInterval('liu()',500);
</script>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
<script>
setInterval("alert(欢迎抽查工作)",5000) //创建定时器5秒弹出一次
</script> </body>
</html>