JavaScript和DOM

body { margin: 0 }
.left { float: left }
.right { float: right }
.pg-head { height: 48px; background-color: aquamarine; min-width: 1000px }
.pg-head .logo { width: 200px; background-color: aqua; text-align: center; line-height: 48px; color: white; font-size: 26px; font-family: 微软雅黑, 华文细黑, 黑体, Arial }
.pg-head .user-info { height: 48px }
.pg-head .user-info .item { display: inline-block; padding: 0 10px; line-height: 48px }
.pg-head .user-info .item:hover { background-color: beige }
.pg-head .user-info .img { overflow: hidden; float: right; width: 40px; height: 40px; padding: 4px 10px }
.pg-head .avatar { width: 40px; height: 40px; padding: 4px 10px; margin-right: 10px; position: relative }
.pg-head .avatar:hover .user-menu { display: block }
.pg-head .avatar .user-menu { position: absolute; width: 100px; top: 48px; right: -10px; display: none; z-index: 100; background-color: aqua }
.pg-head .avatar .user-menu a { display: block; line-height: 30px; border-top: 1px solid cyan }
.pg-head .avatar .user-menu a:hover { background-color: aquamarine }
.pg-body { min-width: 1000px }
.pg-body .menus { position: absolute; top: 48px; left: 0; bottom: 0; width: 200px }
.pg-body .content { min-width: 800px; position: absolute; top: 48px; left: 200px; bottom: 0; right: 0; z-index: 99; background-color: #dddddd }
.pg-body .content>div { margin: 20px 20px; border: 1px dotted #dddddd }

运维管理平台

个人资料 其他

登录 注销

 

作业

作业列表

1. 表格全选反选取消
2. 添加标签
3. 欢迎信息
4. 删除内容
5. 显示时间
6. 搜索框

表格全选反选取消

选择	主机名	IP	端口
	c1.com	192.168.1.80	80
	c1.com	192.168.1.80	80
	c1.com	192.168.1.80	80

添加标签

• helei

滚动标签

欢迎李磊今天来上课

删除

 

显示时间

 

搜索框

<script type="text/javascript">// <![CDATA[
//全选
function allclick() {
var obj = document.getElementById('tb').children;
for(var i=0;i<obj.length;i++){
console.log(obj[i].firstElementChild.firstElementChild);
obj[i].firstElementChild.firstElementChild.checked=true;
}
}
//反选
function resetclick() {
var obj = document.getElementById('tb').children;
for(var i=0;i<obj.length;i++){
if(obj[i].firstElementChild.firstElementChild.checked==true){
obj[i].firstElementChild.firstElementChild.checked=false;
}else {
obj[i].firstElementChild.firstElementChild.checked=true;
}
}
}
//取消
function removeclick() {
var obj = document.getElementById('tb').children;
for(var i=0;i<obj.length;i++){
obj[i].firstElementChild.firstElementChild.checked=false;
}
}
//添加标签
function addmsg() {
var msg=document.getElementById('d2').firstElementChild.nextElementSibling.value;
if(msg.trim()!=''){
var obj = document.createElement('li');
obj.innerText=msg;
document.getElementById('u1').appendChild(obj);
document.getElementById('d2').firstElementChild.nextElementSibling.value='';
}
}
//欢迎李磊今天来上课
function welcome() {
var text_1 = document.getElementById('d3').lastElementChild.innerText;
var text_2 = text_1.substring(1,text_1.length+1).concat(text_1[0]);
document.getElementById('d3').lastElementChild.innerText = text_2;
console.log(text_2);
}
setInterval(welcome,1000);
//删除
function deleter() {
document.getElementById('d4').lastElementChild.innerText='已删除';
setTimeout(function () {
document.getElementById('d4').lastElementChild.innerText='';
},5000)
}
//显示时间
function times() {
data = new Date();
var year = data.getYear();
var moth = data.getMonth();
var day = data.getDate();
var hours = data.getHours();
var minu = data.getMinutes();
var sen = data.getSeconds();
var times = year+'-'+moth+'-'+day+' '+hours+':'+minu+':'+sen;
document.getElementById('d5').lastElementChild.innerText=times;
}
setInterval(times,1000);
// ]]></script>

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd

sdd