在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. linux下alias命令具体解释

    linux下alias命令具体解释 用途说明 设置命令的别名.在linux系统中假设命令太长又不符合用户的习惯,那么我们能够为它指定一个别名. 尽管能够为命令建立"链接" 解决长文 ...

  2. DirectX11 学习笔记7 - 支持自由移动的摄像机

    如今将又一次制定一个camera摄像机.能够自由移动. 比方前进 后退,上游 下潜. 各个方向渲染之类的. 首先设置按键. 这个时候须要在 XWindow.h 里面 bool XWindow::fra ...

  3. iOS开发——高级篇——线程同步、线程依赖、线程组

    前言 对于iOS开发中的网络请求模块,AFNet的使用应该是最熟悉不过了,但你是否把握了网络请求正确的完成时机?本篇文章涉及线程同步.线程依赖.线程组等专用名词的含义,若对上述名词认识模糊,可先进行查 ...

  4. make常见报错原因分析

    1 No rule to make target ‘xxx’ 原因一般是'xxx'文件不存在,首先应该去相应的目录检查文件是否存在.

  5. 危险的input 微博的过去

    更改uid post地址不变

  6. Interval 计时器

    语法: setInterval(代码,交互时间); 在执行时,从载入页面后每隔指定的时间执行代码. clearInterval( setInterval() 返回的 ID 值 ): 取消计时器 < ...

  7. swoole简易实时聊天

    最近公司拓展业务,需要做一个即时聊天业务,就顺带研究了一下swoole,文档地址贴出来:https://wiki.swoole.com/ 文档写得很详细,demo也很简洁明了,所以废话就不多说了. 工 ...

  8. bzoj4810

    http://www.lydsy.com/JudgeOnline/problem.php?id=4810 问题就在于怎么快速查询 我们先用莫队转移,但是没办法快速地查询,那么我们就用bitset这个东 ...

  9. TI BLE: Advertisement

    #define GAPROLE_ADVERT_ENABLED 0x305 //!< Enable/Disable Advertising. Read/Write. Size is uint8. ...

  10. 洛谷P3698 [CQOI2017]小Q的棋盘

    传送门 考虑一个贪心,先在根节点周围转一圈,然后再往下走最长链肯定是最优的 然后设最长链的长度为$d$,如果$m\leq d$,那么答案为$m+1$ 否则的话还剩下$m-d+1$步,又得保证能走回来, ...