在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让页面逐渐变透明,直到消失的更多相关文章

  1. prism.js使页面代码变得漂亮

    第一次接触prism.js,并把它用到了园子里. 装逼如风,常伴吾身.有了如此利器,从此院子里我的代码是"最"漂亮的! 身为程序员深刻体会代码高亮在生产过程中是多么的重要.以下便是 ...

  2. aos.js让页面滚动变得丰富

    (转)<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script ...

  3. 通过 JS 判断页面是否有滚动条的简单方法

    前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁.最终通过参考不同方法,写了一个比较简单的方法.在判断滚动条的同时也需要计算滚动条的 ...

  4. JS控制页面内容

    JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...

  5. 6.bootstrap 将文本内容关联一个动作(手机端导航适配)&在超小尺寸下显示,屏幕变大后消失

    1.情景:这是出现在手机端导航适配的,点击文本MENU可以出现下拉的list 解决方法: 1.首先要想到,MENU只有两个状态,因此可以用checkbox实现 2.将MENU放在label标签里面,l ...

  6. MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题

    解决弹出输入法时页面高度变小导致底部上浮的问题 在有输入框的页面,当输入法弹出的时候,底部元素上浮遮盖了输入框,影响页面美观及功能.查找了一下,页面变窄是不可避免的.即使是设置绝对固定也是不可以的.因 ...

  7. JS实现页面进入、返回定位到具体位置

    最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...

  8. 父容器利用opacity设置透明后,子元素跟着变透明的解决方案

    背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从 ...

  9. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

随机推荐

  1. VirtualMachineManager

    Java Code Examples for com.sun.jdi.VirtualMachineManager https://www.programcreek.com/java-api-examp ...

  2. Python爬虫开发【第1篇】【beautifulSoup4解析器】

    CSS 选择器:BeautifulSoup4 Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. pip 安装:pip instal ...

  3. MySQL-插入数据(INSERT)

    Insert语句可将一行或多行插入到表中. INSERT语法: INSERT INTO table(column1,column2...) VALUES (value1,value2,...); 首先 ...

  4. 图像处理之基础---滤波器之高斯低通滤波器的高斯模板生成c实现

    ()代码实现 对原图进行高斯平滑,去除图像中的计算噪声void Bmp::MakeGauss(double sigma,double **pdKernel,int *pnWindowSize){ // ...

  5. AVD那些事儿

    启动了AVD却说找不到AVD 错误提示: No active compatible AVD's or devices found. Relaunch this configuration after ...

  6. java Bean及其使用

    1 getter/setter方法 java例子: public class student { private String name; public String getName() { retu ...

  7. Bootstrap popover源码分析

    /* ======================================================================== * Bootstrap: popover.js ...

  8. NPOI设置Excel中的单元格识别为日期

    只有月/日/年的格式,才能显示为Date 其他的,都是显示为Custom

  9. iOS开发个人开发账号的证书详细使用及介绍

    本人也和大家一样在学习iOS的开发,在开发当中最烦的就是证书出问题,主要是没有理解透证书的含义,因此查阅了一些资料,才对证书有了一定的认识,本文章就是介绍个人的个人理解,有不对的地方大加可以留言提醒, ...

  10. Linux系统下 为命令配置别名

    1.什么是别名 在管理和维护Linux系统的过程中,将会使用到大量命令,有一些很长的命令或用法经常被用到,重复而频繁的输入某个很长命令或用法是不可取的.这时可以使用 别名 功能将这个过程简单化. Li ...