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> < ...
随机推荐
- 【CERC2008】【BZOJ4319】Suffix reconstruction
Description 话说练习后缀数组时,小C 刷遍 poj 后缀数组题. 各类字符串题闻之丧胆.就在准备对敌方武将发出连环杀时,对方一记无中生有,又一招顺 手牵羊.小C 程序中的原字符数组就被牵走 ...
- .net Core使用Orcle官方驱动连接数据库 C#参考教程 http://www.csref.cn
.net Core使用Orcle官方驱动连接数据库 最近在研究.net Core,因为公司的项目用到的都是Oracle数据库,所以简单试一下.net Core怎样连接Oracle. Oracle官 ...
- April Fools Day Contest 2014 H. A + B Strikes Back
H. A + B Strikes Back time limit per test 1 second memory limit per test 256 megabytes input standar ...
- ExtAspNet从DataTable里导出Excel
protected void btn_ToExcel_Click(object sender, EventArgs e) { Response.ClearContent(); Response.Add ...
- iOS 特定图片的button的旋转动画
近期做的东西中,要为一个有特定图片的button加入旋转动画,Demo代码例如以下: #import "ViewController.h" @interface ViewContr ...
- easyUI 动态添加窗体
有一张页面A,在页面开头引用了jquery.easyUI.min.js. 现在想达到这么一种效果,点击页面A的一个按钮,弹出一个easyUI窗体.因为想分模块的原因,这个窗体对应的是另一张页面B.在点 ...
- javaSE基础(一)
说明: 1)本系列专综合java SE 之基础概念!因为个人觉得,许多知识点的不理解来自于对各种名称与概念的定义的不理解. 2)其中的定义参考来自于Stuart Reges 和 Marty Stepp ...
- HTTPS数据包抓取的可行性分析
HTTPS数据包抓取的可行性分析 相信只要是从事软件开发, 多多少少都会涉及到数据包的抓取.常见的有网页数据抓取(即网页爬虫),应用程序数据包抓取等.网页数据抓取比较简单, 在chrome下可以非常方 ...
- 5. extjs 中buttonAlign什么意思
转自:https://zhidao.baidu.com/question/1174901985976576339.html指定Panel中按钮的位置.可配置的值有'right', 'left' 和 ' ...
- 基于ASP.Net Core开发一套通用后台框架记录-(总述)
写在前面 本系列博客是本人在学习的过程中搭建学习的记录,如果对你有所帮助那再好不过.如果您有发现错误,请告知我,我会第一时间修改. 前期我不会公开源码,我想是一点点敲代码,不然复制.粘贴那就没意思了. ...