html 请假条（恶搞）

代码

步骤

如何改后缀

代码

先上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>请假条</title><style>html, body {margin: 0;padding: 0;background: #f2f1f6;}.container {position: relative;width: 500px;height: 300px;background: #f2f1f6;}.container h1 {margin-top: 0;text-align: center;}.container img {vertical-align: -70px;}.bd {padding-left: 30px;}.ft {position: absolute;width: 100%;bottom: 20px;padding: 0 30px;line-height: 30px;box-sizing: border-box;}.btn-group {float: left;}.fr {float: right;}button {cursor: pointer;}#p1 {}.not-allow {position: relative;}#p2 {display: none;}.red {margin: 0;font-size: 24px;padding: 30px 40px;color: red;letter-spacing: 4px;}.wavy {text-decoration: underline;text-decoration-style: wavy;}.name {padding-left: 10px;}.btn {padding: 6px 12px;}</style>
</head>
<body><div class="container"><div id="p1"><h1>请假条</h1><div class="bd">尊敬的老师: <img src="https://p.qqan.com/up/2021-1/16100050925828871.jpg" width="120"/></div><div class="ft"><div class="btn-group"><button class="btn allow">同意</button><button class="btn not-allow" id="not-allow">不同意</button></div><div class="fr">请假人: <span class="name">这里改成自己的名字</span></div></div></div><div id="p2"><h2 class="red">老师大人, 我这就回家</span>明天再见！。<br/><!--这里可以自己写-->!!!!再贱!!!!</h2><div class="ft"><button class="btn fr exit">退出</button></div></div></div><script>(function(){function $(selector) {return document.querySelector(selector);}var $p1 = document.getElementById('p1');var $p2 = document.getElementById('p2');var $container = $('.container');var $btn = $('#not-allow');var isBlockClose = true;var maxX = $container.clientWidth - 1, maxY = $container.clientHeight - 1;var originPos = $btn.getBoundingClientRect();$('.allow').addEventListener('click', function() {$p1.style.display = 'none';$p2.style.display = 'block';});$btn.addEventListener('mouseover', function() {this.style.left = Math.floor(Math.random() * maxX - originPos.left) + 'px';this.style.top = Math.floor(Math.random() * maxY - originPos.top) + 'px';//console.log(this.style.left, this.style.top);});$('.exit').addEventListener('click', function() {isBlockClose = false;window.close();});window.addEventListener('beforeunload', function(e) {if (isBlockClose) {alert("此路不通");e.returnValue = false;e.preventDefault();return "此路不通";}});})();</script>
</body>
</html>

步骤

1、先新建一个文本文档

2、双击打开，把上面代码复制进去

3、保存并退出，选择重命名，把后缀改成.html，如果出现警告，选是

Tips：不会改后缀的看后面

如何改后缀

1、先打开任意一个文件夹，点击查看

2、把后面“文件扩展名”勾选上就可以

html 请假条（恶搞）相关推荐

如何在电脑上制作请假条表格_条码标签打印软件如何制作请假表
在我们日常工作当中,难免有的小伙伴会有事情,那么这个时候就需要写请假条了.可是请假条这个小小的请假表又是怎么制作的呢?接下来我们就一起在条码标签打印软件中,来看下具体的操作步骤. 在制作请假表时会用到 ...
【文心一言】广告文案、演讲稿与请假条自动生成
前言作为一名大学生而言,平时参加或者举办一些学校组织的活动的时候,总是避免不了需要准备一些演讲稿.广告宣传文案等内容,甚至于在疫情十分严重的这几年内,如何跟老师"委婉的"请假,也 ...
计算机二级请假条,请假条的范文标准版
请假条的范文标准版因为请假的原因,请假条分为请病假和请事假两种.下面是小编为大家搜集了请假条范文标准版,供大家参考借鉴. 请假条范文标准版(一) 尊敬的_______________: 您好!我是余 ...
如何在电脑上制作请假条表格_单位请假条表格
单位请假条表格尊敬的领导: 您好! 我是部(门)的' (姓名),因为 (原因),需要请假(时间)从年月日到年月日 ,共( )天假,请假期间有效联系方式: . 恳请领导批准,谢谢! 综 ...
java生成表格图片（请假条为例）
java生成表格图片(请假条) package table;import java.awt.Color; import java.awt.Font; import java.awt.Graphics; ...
如何在电脑上制作请假条表格_如何使用电脑制作请假条?电脑制作请假条方法介绍...
请假条是公司里常用的表格,今天小编要讲的便是如何使用电脑制作请假条,今天小编就为大家详细介绍一下,来看看吧! 软件名称:微软Office Word.Excel.ppt2007兼容包(兼容2003补丁插 ...
某OA系统需要提供一个假条审批的模块，如果员工请假天数小于3天，主任可以审批该请假条；如果员工请假天数大于等于3天，小于10天，经理可以审批；如果员工请假天数大于等于10天，小于30天，总经理可以审批
某OA系统需要提供一个假条审批的模块,如果员工请假天数小于3天,主任可以审批该请假条:如果员工请假天数大于等于3天,小于10天,经理可以审批:如果员工请假天数大于等于10天,小于30天,总经理可以审批 ...
如何在电脑上制作请假条表格_单位请假条模板表格标准版
请假条与书信.书面通知.启事.海报.日记.留言条.履历表等一样,是应用文之一,是请求领导或老师,准假不参加某项工作.学习.活动的文书, 单位请假条模板表格一尊敬的领导: 您好!我因 ________ ...
个人请假条格式（六篇）
导读:个人请假条格式是指个人原因需要上级请假,一般用人单位请假规章制度是要求请假人员,需递交请假条,这里我们称为个人请假条.问题来了,个人请假条格式有哪些?下面我爱请假网为您整理关于"个人请 ...

html 请假条（恶搞）

代码

步骤

如何改后缀

html 请假条（恶搞）相关推荐

最新文章

热门文章