代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>千歆</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="css/desktop.css"/>
</head>
<body>
<div id="systematic">
<div id="desktop">
<div id="backdrop"></div>
<div id="content">
<div class="shortcuts">
<div class="shortcut">
<div class="block">
<div class="iconfont icon-jiaoxue shortcut-icon"></div>
<div class="title" data-href="jiaoxue">教学</div>
</div>
</div>
<div class="shortcut">
<div class="block">
<div class="iconfont icon-jiaoshiguanli shortcut-icon"></div>
<div class="title" data-href="jiaoshiguanli">教师</div>
</div>
</div>
<div class="shortcut">
<div class="block">
<div class="iconfont icon-xiangmu shortcut-icon"></div>
<div class="title" data-href="xiangmu">项目</div>
</div>
</div>
<div class="shortcut">
<div class="block">
<div class="iconfont icon-xiaoxi shortcut-icon"></div>
<div class="title" data-href="xiaoxi">消息</div>
</div>
</div>
<div class="shortcut">
<div class="block">
<div class="iconfont icon-renshiguanli2 shortcut-icon"></div>
<div class="title" data-href="renshiguanli2">人事</div>
</div>
</div>
<div class="shortcut">
<div class="block">
<div class="iconfont icon-zhuti1 shortcut-icon"></div>
<div class="title" data-href="theme.html">主题</div>
</div>
</div>
<div class="shortcut">
<div class="block">
<div class="iconfont icon-jianliguanli shortcut-icon"></div>
<div class="title" data-href="jianliguanli">简历</div>
</div>
</div>
<div class="shortcut">
<div class="block">
<div class="iconfont icon-tongji shortcut-icon"></div>
<div class="title" data-href="tongji">数据统计</div>
</div>
</div>
<div class="shortcut">
<div class="block">
<div class="iconfont icon-xuesheng shortcut-icon"></div>
<div class="title" data-href="xuesheng">学生</div>
</div>
</div>
<div class="shortcut">
<div class="block">
<div class="iconfont icon-shezhi shortcut-icon"></div>
<div class="title" data-href="system.html">系统设置</div>
</div>
</div>
<div class="shortcut">
<div class="block">
<div class="iconfont icon-qudao1 shortcut-icon"></div>
<div class="title" data-href="qudao1">渠道</div>
</div>
</div>
</div>
</div>
<div id="taskbar">
<div id="start">
<div class="start" data-status="close">开始</div>
<div class="start-menu">
<div class="menu-left"><i class="iconfont icon-084tuichu exit"></i></div>
<div class="menu-right">
<ul>
<li><i class="iconfont icon-nv1"></i> <span>个人中心</span></li>
<li><i class="iconfont icon-shezhi"></i> <span>系统设置</span></li>
<li><i class="iconfont icon-suo"></i> <span>锁屏</span></li>
<li><i class="iconfont icon-zhuti"></i> <span>个性化主题</span></li>
<li><i class="iconfont icon-xiaoxi"></i> <span>消息中心</span></li>
</ul>
</div>
</div>
</div>
<div class="mission">
<div class="task-right-menu">
<div class="close"><i class="iconfont icon-guanbi close"></i> 关闭窗口</div>
</div>
<div class="tasks">
<!-- <div class="task">系统设置</div> -->
</div>
</div>
<div class="taskbar-right">
<div class="taskbar-right-message"><i class="iconfont icon-xiaoxi" title="退出"></i></div>
<div class="taskbar-right-time">
<p class="time">00:00:00</p>
<p class="date">00-00-00</p>
</div>
<div class="taskbar-right-desktop"></div>
</div>
</div>
</div>
<div id="unknown">
<!-- 右键 -->
<div class="right-menu">
<div><span><i class="iconfont icon-zhuomian"></i></span><b>显示桌面</b></div>
<div><span><i class="iconfont icon-zhuti"></i></span><b>个性化</b></div>
<div class="lockscreen"><span><i class="iconfont icon-suo1"></i></span><b>屏幕锁屏</b></div>
<div onclick="location.reload();"><span><i class="iconfont icon-shuaxin"></i></span><b>刷新</b></div>
<div><span><i class="iconfont icon-shezhi"></i></span><b>系统设置</b></div>
</div>
<!-- 弹出层 -->
<div class="popup-layer">
<div id="layer">
<!-- <div class="layer">
<div class="popup-layer-move"></div>
<div class="title">标题</div>
<div class="buttons"><i class="iconfont icon-zuixiaohua small"></i><i class="iconfont icon-chuangkou-fangda size"></i><i class="iconfont icon-guanbi close"></i></div>
<div class="main"><iframe id="layerContent" src="/" width="" height="" allowtransparency="true"></iframe></div>
</div> -->
</div>
</div>
<!-- 消息 -->
<div class="right-message">
<div id="message">
<div class="message">
<div class="title">最新通知</div>
<ul>
<li>
<h4>你的最新通知信息！</h4>
<p>欢迎你使用公司内容OA系统！</p>
</li>
<li>
<h4>你的最新通知信息！</h4>
<p>欢迎你使用公司内容OA系统！</p>
</li>
<li>
<h4>你的最新通知信息！</h4>
<p>欢迎你使用公司内容OA系统！</p>
</li>
<li>
<h4>你的最新通知信息！</h4>
<p>欢迎你使用公司内容OA系统！</p>
</li>
<li>
<h4>你的最新通知信息！</h4>
<p>欢迎你使用公司内容OA系统！</p>
</li>
</ul>
</div>
</div>
</div>
<!-- 锁屏 -->
<div class="full-lock">
<div id="lock">
<div class="lock" style="background: url(images/iu2.jpg) no-repeat center center/cover;">
<div class="user">
<div class="image"><img src="images/img.jpg" width="150" /></div>
<div class="username">Qx-Admin</div>
<div class="userpass"><input type="password"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/popup-layer.js" type="text/javascript" charset="utf-8"></script>
<script src="js/taskbar.js" type="text/javascript" charset="utf-8"></script>
<script src="js/start.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
start.init();
/**
* 任务栏任务右键
*/
/*
var taskbar = {
init: function(){
var tasks = document.querySelectorAll('#taskbar .mission .tasks .task'),
taskLen = tasks.length;
var that = this;
for(var i=0; i<taskLen; i++){
tasks[i].oncontextmenu = function(){
that.openRightMenu();
};
}
},
openRightMenu: function(){
var taskRightMenu = document.querySelector('#taskbar .mission .task-right-menu');
taskRightMenu.style.display = 'block';
},
closeRightMenu: function(){
var taskRightMenu = document.querySelector('#taskbar .mission .task-right-menu');
taskRightMenu.style.display = 'none';
},
};
taskbar.init();
*/
/**
* 快捷键Ctrl + Alt + L
*/
document.onkeydown = function(e){
if(e.ctrlKey && e.altKey && e.keyCode == 76){
console.log(e);
}
};
/**
* 锁屏
*/
/*
var lockLayer = document.querySelector('.full-lock #lock');
lockLayer.oncontextmenu = function(e){
e.preventDefault();
};
if(localStorage.lockscreen == 'true'){
lockLayer.style.display = 'block';
}else{
lockLayer.style.display = 'none';
}
var lockScreenBtn = document.querySelector('#unknown .right-menu .lockscreen');
lockScreenBtn.onclick = function(){
var lockscreen = localStorage.lockscreen;
localStorage.lockscreen = true;
lockLayer.style.display = 'block';
};
*/
/**
* 右边消息中心
*/
var msg = document.querySelector('#taskbar .taskbar-right .taskbar-right-message');
document.querySelector('#unknown .right-message #message').oncontextmenu = function(e){
e.preventDefault();
}
msg.onclick = function(){
var messageLayer = document.querySelector('#unknown .right-message #message');
var messageLeft = messageLayer.style.left;
if(messageLeft == '' || messageLeft == '0px'){
messageLayer.style.left = '-320px';
this.setAttribute('class', 'taskbar-right-message spread');
}else{
messageLayer.style.left = 0;
this.setAttribute('class', 'taskbar-right-message');
}
};
/**
* 右下角时钟
*/
var clock = document.querySelector('#taskbar .taskbar-right .taskbar-right-time');
var clockTimer = null;
var playTime = function(){
var date = new Date();
var month = date.getMonth() < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
var dateTxt = date.getFullYear() + '-' + month + '-' + day;
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
var timeTxt = hours + ':' + minutes + ':' + seconds;
clock.querySelector('p.date').innerText = dateTxt;
clock.querySelector('p.time').innerText = timeTxt;
};
playTime();
clockTimer = window.setInterval(playTime, 1000);
/**
* 窗口大小
*/
/*
var windowSize = function(obj, mouseDown){
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var width = obj.clientWidth,
height = obj.clientHeight;
console.log(width, height, w, h);
if(width < w && height < h){
obj.style.width = '100%';
obj.style.height = (h - 40) + 'px';
obj.style.top = 0;
obj.style.left = 0;
obj.querySelector('.size').setAttribute('class', 'iconfont icon-wind-zoom-out size');
}else{
obj.style.width = 1000 + 'px';
obj.style.height = 650 + 'px';
obj.style.top = (h - 650) / 2 + 'px';
obj.style.left = (w - 1000) / 2 + 'px';
obj.querySelector('.size').setAttribute('class', 'iconfont icon-chuangkou-fangda size');
}
};
*/
/**
* 窗口拖动
*/
/*
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var popupLayer = document.querySelectorAll('#unknown .popup-layer #layer .layer');
var iframeLayer = document.querySelector('#unknown .popup-layer #layer .layer .main iframe').contentWindow.document;
iframeLayer.oncontextmenu = function(e){
e.preventDefault();
};
for(var i=0,length=popupLayer.length; i<length; i++){
popupLayer[i].oncontextmenu = function(e){
e.preventDefault();
}
popupLayer[i].style.top = (h - popupLayer[i].clientHeight) / 2 + 'px';
popupLayer[i].style.left = (w - popupLayer[i].clientWidth) / 2 + 'px';
var mouseDown = function(ev){
ev.stopPropagation();
var timer = null;
clearTimeout(timer);
var that = this;
var layerMove = that.parentNode.querySelector('.popup-layer-move');
layerMove.style.display = 'block';
var parent = that.parentNode;
parent.style.zIndex = 20;
var oevent = ev || event;
var distanceX = oevent.clientX - parent.offsetLeft;
var distanceY = oevent.clientY - parent.offsetTop;
document.onmousemove = function(ev){
var oevent = ev || event;
parent.style.left = oevent.clientX - distanceX + 'px';
parent.style.top = oevent.clientY - distanceY + 'px';
};
var times = null;
parent.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
layerMove.style.display = 'none';
};
}
popupLayer[i].querySelector('.title').onmousedown = mouseDown;
var timeer = null;
popupLayer[i].querySelector('.buttons .small').onclick = function(e){
this.parentNode.parentNode.style.display = 'none';
}
popupLayer[i].querySelector('.buttons .size').onclick = function(e){
windowSize(this.parentNode.parentNode, mouseDown);
var width = this.clientWidth,
height = this.clientHeight;
if(w > width && h > height){
this.parentNode.parentNode.querySelector('.title').onmousedown = mouseDown;
}else{
this.parentNode.parentNode.querySelector('.title').onmousedown = null;
}
}
popupLayer[i].querySelector('.buttons .close').onclick = function(e){
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
popupLayer[i].ondblclick = function(ev){
ev.stopPropagation();
windowSize(this, mouseDown);
var width = this.clientWidth,
height = this.clientHeight;
if(w > width && h > height){
this.querySelector('.title').onmousedown = mouseDown;
}else{
this.querySelector('.title').onmousedown = null;
}
};
}
*/
/**
* 右键菜单
*/
document.querySelector('#content').oncontextmenu = function(e){
//取消默认的浏览器自带右键 很重要！！
e.preventDefault();
var menu = document.querySelector('#unknown .right-menu');
menu.oncontextmenu = function(e){
e.preventDefault();
};
menu.style.left = e.clientX+'px';
menu.style.top = e.clientY+'px';
menu.style.height = 'auto';
menu.onclick = function(e){
e.stopPropagation();
}
}
document.querySelector('#taskbar').oncontextmenu = function(e){
e.preventDefault();
}
//关闭右键菜单
document.querySelector('#content').onclick=function(e){
var menu = document.querySelector('#unknown .right-menu');
//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
menu.style.height = 0;
var shortcuts = document.querySelectorAll('#content .shortcuts .shortcut');
for(var j=0,len=shortcuts.length; j<len; j++){
shortcuts[j].querySelector('.block').setAttribute('class', 'block');
}
var messageLayer = document.querySelector('#unknown .right-message #message');
messageLayer.style.left = 0;
document.querySelector('#taskbar .taskbar-right .taskbar-right-message').setAttribute('class', 'taskbar-right-message');
taskbar.menu(0, false);
start.init().close();
}
/**
* 桌面图标项目
*/
window.onload = window.onresize = function(){
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var shortcuts = document.querySelectorAll('#content .shortcuts .shortcut');
var count = 0, cols = 0;
for(var i=0,len=shortcuts.length; i<len; i++){
var timer = null;
shortcuts[i].setAttribute('data-index', i);
shortcuts[i].onclick = function(e){
//e.stopPropagation();
var that = this;
clearTimeout(timer);
//初始化一个延时
timer = setTimeout(function(){
for(var j=0; j<len; j++){
shortcuts[j].querySelector('.block').setAttribute('class', 'block');
}
that.querySelector('.block').setAttribute('class', 'block click');
},252);
};
//双击事件会先触发两次单击事件，然后再执行双击事件，使用清除定时器来达到双击只执行双击事件的目的
shortcuts[i].ondblclick = function(e){
//e.stopPropagation();
var that = this;
clearTimeout(timer);
/*
for(var j=0; j<len; j++){
shortcuts[j].querySelector('.block').setAttribute('class', 'block');
}
that.querySelector('.block').setAttribute('class', 'block click');
*/
var blockTitle = this.querySelector('.block div:last-child');
popup.zIndex();
popup.open({
title: blockTitle.innerText,
href: blockTitle.getAttribute('data-href'),
index: that.getAttribute('data-index'),
close: function(index){
taskbar.remove(index);
},
level: function(index){
taskbar.level(index);
}
});
taskbar.init({
title: blockTitle.innerText,
index: that.getAttribute('data-index'),
close: function(index){
popup.close(index);
},
level: function(index){
popup.level(index);
},
small: function(index){
popup.small(index, false);
}
});
//console.log("双击");
};
var shortcutTop = 0,
shortcutLeft = 0;
shortcutTop = count * shortcuts[i].clientHeight;
if(shortcutTop >= (h - shortcuts[i].clientHeight - 32)){
cols++;
count = 0;
shortcutTop = count * shortcuts[i].clientHeight;
shortcutLeft = cols * shortcuts[i].clientHeight;
}
shortcutLeft = cols * shortcuts[i].clientHeight;
shortcuts[i].style.top = shortcutTop + 'px';
shortcuts[i].style.left = shortcutLeft + 'px';
count++;
}
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。