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> < ...
随机推荐
- Java基础笔记(一)
本文主要是我在看<疯狂Java讲义>时的读书笔记,阅读的比较仓促,就用 markdown 写了个概要. 第一章 Java概述 Java SE:(Java Platform, Standar ...
- vue全局注册与局部注册的写法
vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用.举个例子,看看写法: <div id="app"> <p>页面载入时,inp ...
- ubutu14.04无法使用sudo,也无法切换到root用户去解决问题怎么办?
一不小心,修改了/etc/sudoers文件. 惨了. 无法使用sudo了,啥都干不成了. 最最关键的是,也无法用root登录. 本想着要重装系统了. 后来发现了神奇的ubuntu安全模式. 1.重启 ...
- bzoj 2428 均分数据
题目大意: 已知N个正整数 将它们分成M组,使得各组数据的数值和最平均,即各组的均方差最小 求最小均方差 思路: 模拟退火 #include<iostream> #include<c ...
- 【HDU 5698】 瞬间移动
[题目链接] 点击打开链接 [算法] 用f[i][j]表示走到(i,j)这个位置有多少种方案,因为走到(i,j)这个位置,上一步一定在它左上角的矩形中,所以, f(i,j) = sigma( f(x, ...
- csdn 去除广告
下载 Adblock Plus 下载地址:https://adblockplus.org/ 下载后安装即可.
- foxmail地址簿导入thunderbird的乱码问题 (转载)
转自:http://blog.csdn.net/gexueyuan/article/details/9032595 由于foxmail的地址簿格式和thunderbird的格式不一样,另外也存在编码问 ...
- MARK ZUCKERBERG, A letter to our daughter(转)
A letter to our daughter MARK ZUCKERBERG·WEDNESDAY, DECEMBER 2, 2015 Dear Max, Your mother and I ...
- bzoj 2200: [Usaco2011 Jan]道路和航线【spfa】
直接跑最短路就行了--还不用判负环 #include<iostream> #include<cstdio> #include<queue> using namesp ...
- bzoj 1689: [Usaco2005 Open] Muddy roads 泥泞的路【贪心】
按左端点排序,贪心的选即可 #include<iostream> #include<cstdio> #include<algorithm> using namesp ...