js让页面逐渐变透明,直到消失
在gitHub闲逛的时候,无意间发现了些好玩的代码,一个歪果仁写的,这里我做了些修改和优化,gitHub链接已经忘了,是一段恶搞的js代码,假如你的顾客或者老板拖欠你工资,那你就可以让项目页面在浏览器慢慢变透明,直到消失,代码很简单,但脑洞清奇,不妨来试试吧
// 设定时间,页面慢慢变透明,直到消失
var opacityInterval = setInterval(function () {
// 普通时间转为格林威治时间
var targetDate = new Date('2019-05-23 17:20:00')
var currentDate = new Date()
// 目标时间距1970年毫秒数
var time1 = targetDate.getTime()
// 当前时间距1970年毫秒数
var time2 = currentDate.getTime()
// 剩余时间毫秒数
var times = time1 - time2
// 设定timeMsec值, 让 times/timeMsec 的比值小于等于1, 也就是opacity的取值范围
var timeMsec = ''
// 剩余时间少于1小时, 就以一小时为单位, 当然你也可以设置单位为一天、一周、半个月、或半年, 相应改下 targetDate值
if (times < 1000 * 60 * 60) {
timeMsec = 1000 * 60 * 60
}
// 计算出均匀透明度
var opacityRate = (times / timeMsec).toFixed(2)
if (times > 0) {
document.getElementsByTagName("body")[0].style.opacity = opacityRate
} else {
// 剩余时间为0, 设置opacityRate为0, 并清除定时器
opacityRate = 0
clearInterval(opacityInterval)
}
}, 1000)
---------------------
js让页面逐渐变透明,直到消失的更多相关文章
- prism.js使页面代码变得漂亮
第一次接触prism.js,并把它用到了园子里. 装逼如风,常伴吾身.有了如此利器,从此院子里我的代码是"最"漂亮的! 身为程序员深刻体会代码高亮在生产过程中是多么的重要.以下便是 ...
- aos.js让页面滚动变得丰富
(转)<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script ...
- 通过 JS 判断页面是否有滚动条的简单方法
前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁.最终通过参考不同方法,写了一个比较简单的方法.在判断滚动条的同时也需要计算滚动条的 ...
- JS控制页面内容
JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...
- 6.bootstrap 将文本内容关联一个动作(手机端导航适配)&在超小尺寸下显示,屏幕变大后消失
1.情景:这是出现在手机端导航适配的,点击文本MENU可以出现下拉的list 解决方法: 1.首先要想到,MENU只有两个状态,因此可以用checkbox实现 2.将MENU放在label标签里面,l ...
- MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题
解决弹出输入法时页面高度变小导致底部上浮的问题 在有输入框的页面,当输入法弹出的时候,底部元素上浮遮盖了输入框,影响页面美观及功能.查找了一下,页面变窄是不可避免的.即使是设置绝对固定也是不可以的.因 ...
- JS实现页面进入、返回定位到具体位置
最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...
- 父容器利用opacity设置透明后,子元素跟着变透明的解决方案
背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从 ...
- js jquery 页面加载初始化方法
js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...
随机推荐
- 【Linux多线程】同步与互斥的区别
同步与互斥这两个概念经常被混淆,所以在这里说一下它们的区别. 一.同步与互斥的区别 1. 同步 同步,又称直接制约关系,是指多个线程(或进程)为了合作完成任务,必须严格按照规定的 某种先后次序来运行. ...
- 安装eclipse中html/jsp/xml editor插件以及改动html页面的字体
近期在做android项目,用到了jquery mobile 框架以及phonegap,所以就会涉及一些html文件,可是html文件打开的方式是Text Editor ,而且打开之后一些html代码 ...
- ppt五种经典字体组合
在做ppt中常常为使用哪种字体而头疼,如今将ppt的经典字体附上.希望对大家有帮助 五种经典的字体组合 标题字体 正文字体 使用场合 方正综艺简体 微软雅黑 课题汇报.咨询报告.学术研讨等正式场合 方 ...
- 在C++代码中调用L脚本语言
L脚本语言同意被其他编程语言调用.如C++,非常easy.仅仅要在宿主语言中载入L脚本引擎的动态库 直接调用这两个函数就能够了 extern "C" int __stdcall S ...
- nginxserver报403 forbidden错误的解决的方法
改动nginx.config文件内容: location / { #root html; root D:\java; ...
- 容器与容器编排实战系列 1 -- Docker 安装
CentOS7.4 下安装Docker 详细步骤 第一步:安装Docker yum install -y yum-utils device-mapper-persistent-data lvm2 yu ...
- java操作linux,调用shell命令
import org.junit.jupiter.api.Test; import java.io.BufferedReader; import java.io.IOException; import ...
- Unicode and .NET
http://csharpindepth.com/Articles/General/Unicode.aspx Scope of this page This is a big topic. Don't ...
- POJ2503 Babelfish map或者hash_map
POJ2503 这是一道水题,用Map轻松AC. 不过,可以拿来测一下字符串散列, 毕竟,很多情况下map无法解决的映射问题需要用到字符串散列. 自己生成一个质数, 随便搞一下. #include&l ...
- SQL Server2012 T-SQL基础教程--读书笔记(1-4章)
SQL Server2012 T-SQL基础教程--读书笔记(1-4章) SqlServer T-SQL 示例数据库:点我 Chapter 01 T-SQL 查询和编程背景 1.3 创建表和定义数据的 ...