一个 Windows 主题的 404 页面 |
您所在的位置：网站首页 › vue写登录页面 › 一个 Windows 主题的 404 页面 |
一个 Windows 主题的 404 页面
|
介绍
Browser95-404 是一个 Windows 95 主题的 404 页面。页面显示为 Windows 95 的桌面，可以点击桌面上的图标进行一些交互，效果如下： Windows 95 主题太古老了，我把它修改成了 Win10 主题样式。 页面结构 此电脑 回收站 打印机 复制代码 最外层是 .win 容器元素。 .win 容器分为 #desktop 桌面和 #taskbar 任务栏两部分。 桌面有 #mycomputer、#trash 和 #print 三个图标。 任务栏有 #start 开始按钮、#clock 时间区域和 #division 分隔符。 JS 代码 页面使用了 jQuery UI 拖拽组件，需要使用 script 标签引入它们： 复制代码 初始化时间和鼠标悬停时的提示文本（日期和星期）。 function startTime() { const date = new Date(); $('#clock').text(date.toLocaleTimeString(0, { hour12: false })).attr('title', date.toLocaleString(0, { dateStyle: 'full' })); setTimeout(function() { startTime() }, 500); } 复制代码 创建错误窗口方法，并处理它们的拖拽操作。 let errNum = 404; let posZ = 0; function spawnWindow() { const posx = (Math.random() * ($(document).width() - 292)).toFixed(); const posy = (Math.random() * ($(document).height() - 125)).toFixed(); posZ += 1; // 生成新窗口 $('body').append(`;Error ${errNum} X ?Message: Unable to locate your page. OK `).find('div.draggable').draggable({ scroll: false }); // 将聚焦窗口置于最前面 $(".draggable").on('mousedown', function(event) { if ($(this).css("z-index") < posZ) { posZ += 1; $(this).css(`z-index`, posZ); } }); errNum += 1; } 复制代码 绑定 “我的电脑” 图标点击事件，打开虚拟文件选择对话框。 function openDialog() { const input = document.createElement('input'); input.type = 'file'; input.click(); } 复制代码 将函数绑定到文档的就绪事件（当文档完成加载时）。 $(document).ready(function() { startTime(); spawnWindow(); }); 复制代码 码上掘金
Browser95-404：github.com/Daenges/Bro… 本文正在参加「金石计划」 |
【本文地址】
今日新闻 |
推荐新闻 |