Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >分享几段有趣的代码(一)

分享几段有趣的代码(一)

作者头像
夏时
发布于 2018-06-26 08:43:05
发布于 2018-06-26 08:43:05
4K0
举报
文章被收录于专栏:夏时夏时

到处闲逛时经常能发现一些有趣的代码段,于是干脆来个大杂烩吧~

狡猾的标题栏

这个效果很多博客都使用了,看gif图:

很有趣是不是?实现的代码也很简单,在网页的任意地方加入即可:

  1. <script>  
  2. // 浏览器标题切换
  3. var OriginTitile = document.title;    // 保存之前页面标题
  4. var titleTime;  
  5. document.addEventListener('visibilitychange', function(){  
  6. if (document.hidden){  
  7.         document.title = '草榴社區主論壇 - 1024';  
  8.         clearTimeout(titleTime);  
  9.     }else{  
  10.         document.title = '生命-1s ~ ';  
  11.         titleTime = setTimeout(function() {  
  12.             document.title = OriginTitile;  
  13.         }, 2000); // 2秒后恢复原标题
  14.     }  
  15. });  
  16. </script>  

飘荡在页面左下角的蒲公英

这个也可以说是烂大街了……具体效果可以直接看本页面的左下角……

实现代码如下:

  1. <div class="dandelion">  
  2.     <span class="smalldan"></span>  
  3.     <span class="bigdan"></span>  
  4. </div>  
  5. <style type="text/css">  
  6. /* 在小屏幕自动隐藏 */  
  7. @media screen and (max-width:600px){  
  8.     .dandelion{display: none !important;}  
  9. }  
  10. .dandelion span {  
  11.     display: block;  
  12.     position: fixed;  
  13.     z-index: 9999999999;  
  14.     bottom: 0px;  
  15.     background-image: url(data:image/png;base64,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);  
  16.     background-repeat: no-repeat;  
  17.     _background: none;  
  18.     /* 动画效果 */  
  19.     -webkit-animation: ball-x 3s linear 2s infinite;  
  20.     -moz-animation: ball-x 3s linear 2s infinite;  
  21.     animation: ball-x 3s linear 2s infinite;  
  22.     -webkit-transform-origin: bottom center;  
  23.     -moz-transform-origin: bottom center;  
  24.     transform-origin: bottom center;  
  25. }  
  26. /* 大的蒲公英样式 */  
  27. .dandelion .bigdan {  
  28.     width: 64px;  
  29.     height: 115px;  
  30.     left: 41px;  
  31.     background-position: -86px -36px;  
  32.     border: 0px solid #fff;  
  33. }  
  34. /* 小的蒲公英样式 */  
  35. .dandelion .smalldan {  
  36.     width: 36px;  
  37.     height: 60px;  
  38.     left: 88px;     
  39.     background-position: 0 -90px;  
  40.     border: 0px solid #fff;  
  41. }  
  42. /* 以下是动画效果 */  
  43. @keyframes ball-x {  
  44.     0% { transform:rotate(0deg);}  
  45.     25% { transform:rotate(5deg); }  
  46.     50% { transform:rotate(0deg);}  
  47.     75% { transform:rotate(-5deg);}  
  48.     100% { transform:rotate(0deg);}    
  49. }  
  50. @-webkit-keyframes ball-x {  
  51.     0% { -webkit-transform:rotate(0deg);}  
  52.     25% { -webkit-transform:rotate(5deg); }  
  53.     50% { -webkit-transform:rotate(0deg);}  
  54.     75% { -webkit-transform:rotate(-5deg);}  
  55.     100% { -webkit-transform:rotate(0deg);}  
  56. }  
  57. @-moz-keyframes ball-x {  
  58.     0% { -moz-transform:rotate(0deg);}  
  59.     25% { -moz-transform:rotate(5deg); }  
  60.     50% { -moz-transform:rotate(0deg);}  
  61.     75% { -moz-transform:rotate(-5deg);}  
  62.     100% { -moz-transform:rotate(0deg);}  
  63. }  
  64. </style>  

页面鼠标点击特效

效果嘛……你在本页不断点击鼠标左键就能看到了(千万别上瘾哦~)

实现的方法很简单,还是老套路,在页面的任意位置加入如下代码即可(需要引入 jQuery

  1. <script>  
  2. jQuery(document).ready(function($) {   
  3.     $("html,body").click(function(e){   
  4. var dfs=[  
  5. "您刚才的点击使计生局放开了"+Math.floor(Math.random()*100)+"胎政策。",  
  6. "您刚才的点击使黄石超级火山爆发了",  
  7. "您刚才的点击使罗辑又换了一个女朋友",  
  8. "您刚才的点击使小米公司收购了高通公司",  
  9. "您刚才的点击引爆了"+Math.random()*10000+"光年外的一颗恒星",  
  10. "您刚才的点击使头发变得乌黑浓密了",  
  11. "您刚才的点击使您的波函数坍塌了",   
  12. "您刚才的点击使您的银行卡被盗刷了",   
  13. "您刚才的点击使普朗克常数扩大了十倍",   
  14. "您刚才的点击熄灭了蓝色空间号二号主引擎",   
  15. "您刚才的点击创造了一个小宇宙",   
  16. "您刚才的点击使宇宙由开放转为闭合",   
  17. "您刚才的点击让云天明和关一帆在一起了",  
  18. "您刚才的点击使三体第"+Math.floor(Math.random()*100)+"舰队起航了",   
  19. "您刚才的点击使第"+Math.floor(Math.random()*10000)+"号宇宙毁灭了",   
  20. "您刚才的点击向太阳发射了一颗光粒",   
  21. "您刚才的点击导致三体行星撞上他的主星",  
  22. "您刚才的点击令人类文明将在"+(new Date()).getFullYear()+"年"+((new Date()).getMonth()+1)+"月"+(new Date()).getUTCDate()+"日23:59:59毁灭",  
  23. "您刚才的点击启动了威慑系统",  
  24. "您刚才的点击使谢顿计划脱离了正轨",  
  25. "您刚才的点击使程心按下了威慑开关",  
  26. "您刚才的点击引起了"+Math.random()*10000+"光年外一个行星的爆炸",  
  27. "您刚才的点击使宇宙中产生了一些暗物质",  
  28. "您刚才的点击引起了所有行星上的地震",  
  29. "您刚才的点击使一台诺基亚摔碎了",  
  30. "您刚才的点击使360云盘倒闭了",  
  31. "您刚才的点击小米发布了MIX概念手机",  
  32. "千万不要再次点击鼠标",  
  33. "真的千万不要再次点击鼠标"
  34.         ];  
  35. var n=Math.floor(Math.random() * dfs.length + 1)-1;   //随机获取一条数据
  36. var $i=$("<p/>").text(dfs[n]);      //新建一个b标签,并显示随机的话语
  37. var x=e.pageX,y=e.pageY;            //获取鼠标点击的x,和y
  38.         $i.css({                            //为标签赋予css值
  39. "z-index":99999,   
  40. "top":y-20,   
  41. "left":x,   
  42. "position":"absolute",   
  43. "color":"#E94F06",  
  44. "font-family":"微软雅黑",  
  45. "cursor":"default",  
  46. "-moz-user-select": "none",  
  47. "-webkit-user-select": "none",  
  48. "-ms-user-select": "none",  
  49. "-khtml-user-select": "none",  
  50. "user-select": "none",  
  51.         });   
  52.         $("body").append($i);               //在尾部插入
  53.         $i.animate( {"top":y-180,"opacity":0}, 1500, function(){$i.remove();});     //动画消除
  54.         e.stopPropagation();  
  55.     });  
  56. });   
  57. </script>  
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
详解分布式事务之 Seata-Client 原理及流程
在分布式系统中,分布式事务是一个必须要解决的问题,目前使用较多的是最终一致性方案。自年初阿里开源了Fescar(四月初更名为Seata)后,该项目受到了极大的关注,目前已接近 8000 Star。Seata 以高性能和零侵入的特性为目标解决微服务领域的分布式事务难题,目前正处于快速迭代中,近期小目标是生产可用的 Mysql 版本。
程序猿DD
2019/05/10
2.2K0
详解分布式事务之 Seata-Client 原理及流程
分布式事务中间件 Fescar - RM 模块源码解读
在SOA、微服务架构流行的年代,许多复杂业务上需要支持多资源占用场景,而在分布式系统中因为某个资源不足而导致其它资源占用回滚的系统设计一直是个难点。我所在的团队也遇到了这个问题,为解决这个问题上,团队采用的是阿里开源的分布式中间件Fescar的解决方案,并详细了解了Fescar内部的工作原理,解决在使用Fescar中间件过程中的一些疑虑的地方,也为后续团队在继续使用该中间件奠定了理论基础。
张乘辉
2019/07/10
6530
Seata分布式事务之TM、RM、TC源码分析
笔者通过绘制时序图,我们可以清晰的知道在集成Seata、ShardingSphere、Dubbo之后,我们插入一条数据的整个内部调用链逻辑
spilledyear
2022/05/13
2.6K0
Seata分布式事务之TM、RM、TC源码分析
Seata 源码篇之AT模式启动流程 - 下 - 04
上一篇文章,我们看了Seata AT模式一阶段提交流程,本文我们来看看AT模式的二阶段流程和全局事务提交回滚逻辑的实现。
大忽悠爱学习
2023/10/11
3490
Seata 源码篇之AT模式启动流程 - 下 - 04
seata TC 请求处理流程
TC的业务channelHandler为类 io.seata.core.rpc.netty.AbstractNettyRemotingServer.ServerHandler,注意到达该类的请求都是经过编解码的了,请求类型为RpcMessage。ServerHandler类处理方法有:
luoxn28
2021/01/28
9410
seata TC 请求处理流程
分布式事务之Seata中间件原理及流程详细分析
原文链接:https://blog.csdn.net/f4761/article/details/89077400
天涯泪小武
2019/10/22
2.2K0
分布式事务之Seata中间件原理及流程详细分析
Seata学习整理
在配车的业务中,我们使用了Seata的分布式事务来保证配车的业务逻辑能够正常时,才会做订单信息推送到财务系统。我们的系统配车业务一开始使用Seata的TCC模式来实现的,需要自己实现try和confirm或者cancel的逻辑。之后,由于seata推出了AT模式,之后系统采用的分布式事务使用的是AT模式。
路行的亚洲
2023/02/28
3740
Seata学习整理
深度剖析一站式分布式事务方案Seata-Cient
在之前的文章中已经介绍过Seata的总体介绍,如何使用以及Seata-Server的原理分析,有兴趣的可以阅读下面的文章:
用户5397975
2019/10/14
8350
深度剖析一站式分布式事务方案Seata-Cient
Apache ShardingSphere sharding-jdbc 分布式事务小练习
[技术标准] https://pubs.opengroup.org/onlinepubs/009680699/toc.pdf
前Thoughtworks-杨焱
2021/12/07
8570
​深入了解分布式事务组件 Seata (一)
分布式事务的问题,在微服务架构中一直是难题。单体应用实现本地事务即可,到了分布式环境,情况就变得复杂。一个请求可能涉及多个服务,上下游存在依赖关系,其中的一环失败,需要将整个事务回滚。笔者在去年上半年开源过一款微服务的分布式事务组件:lottor,基于可靠消息的柔性分布式事务实现方案。引入的 Lottor 客户端使用比较复杂,具有业务侵入性。推广使用的效果并不是很好。阿里在今年年初开源了 Seata(原名 fescar),引起了强烈的反响。笔者最近也在考虑改进 Lottor,借学习实践 Seata 的机会,和大家分享一下。
aoho求索
2019/10/20
1.3K0
seata TM源码分析
下面就一起来看下TM模块的实现原理,TM模块是seata中全局事务发起者和掌控者,其核心逻辑有:业务逻辑切面代理:对全局事务注册/提交操作。启动netty客户端:会启动TM/RM客户端与TC通信。数据源切面代理:SQL解析、分支事务注册/提交、undolog保存、分支事务状态上报。Rpc代理:在RPC流程中传递seata上下文(xid等,非本文分析重点)。
luoxn28
2021/01/28
1.3K0
seata TM源码分析
Seata AT 模式启动源码分析
从上一篇文章「分布式事务中间件Seata的设计原理」讲了下 Seata AT 模式的一些设计原理,从中也知道了 AT 模式的三个角色(RM、TM、TC),接下来我会更新 Seata 源码分析系列文章。今天就来分析 Seata AT 模式在启动的时候都做了哪些操作。
张乘辉
2019/12/02
6510
分布式事务:Seata框架AT模式及TCC模式执行流程剖析
管理分支事务处理的资源,与TC交谈以注册分支事务和报告分支事务的状态,并驱动分支事务提交或回滚,在分支事务执行的客户端。
朝雨忆轻尘
2020/11/24
2.2K0
分布式事务:Seata框架AT模式及TCC模式执行流程剖析
Seata-Saga模式 原理
状态机设计组件:seata-saga-statemachine-designer 状态机在线画图工具:saga_designer
全栈程序员站长
2022/11/04
7020
Seata-Saga模式 原理
深度剖析 Seata TCC 模式【图解 + 源码分析】
Seata 目前支持 AT 模式、XA 模式、TCC 模式和 SAGA 模式,之前文章更多谈及的是非侵入式的 AT 模式,今天带大家认识一下同样是二阶段提交的 TCC 模式。
张乘辉
2022/01/24
2.9K0
深度剖析 Seata TCC 模式【图解 + 源码分析】
详解 Seata AT 模式事务隔离级别与全局锁设计
Seata AT 模式是一种非侵入式的分布式事务解决方案,Seata 在内部做了对数据库操作的代理层,我们使用 Seata AT 模式时,实际上用的是 Seata 自带的数据源代理 DataSourceProxy,Seata 在这层代理中加入了很多逻辑,比如插入回滚 undo_log 日志,检查全局锁等。
张乘辉
2022/01/04
3.2K0
详解 Seata AT 模式事务隔离级别与全局锁设计
[图文] Seata AT 模式分布式事务源码分析
AT 模式是 Seata 主推的分布式事务解决方案,最早来源于阿里中间件团队发布的 TXC服务,后来成功上云改名 GTS。相较于TCC而言,Seata的AT模式业务侵入性更低,易于接入。
田守枝
2019/07/11
2.6K0
[图文] Seata AT 模式分布式事务源码分析
防止内卷和被潜规则,Spring Cloud Alibaba微服务架构实战派(上下册)|35岁程序员那些事
在写这本书之前,我先后在两家杭州的“独角兽”公司担任技术负责人,并推进公司核心业务的“中台化”改造。在落地业务中台和技术中台的过程中,督促并指导开发人员统一使用Spring Cloud Alibaba作为中台服务最底层的基础框架。
35岁程序员那些事
2022/09/23
8320
防止内卷和被潜规则,Spring Cloud Alibaba微服务架构实战派(上下册)|35岁程序员那些事
深入了解分布式事务组件 Seata :AT 模式(二)
在前面一篇文章,我们介绍了阿里开源的分布式事务组件 Seata 的相关概念,重点介绍了 Seata 的 AT 模式。并通过一个 Spring-Cloud-JPA 的案例,演示了 AT 模式的使用入门。本文将会结合 Spring-Cloud-JPA 的案例,深入了解 Seata AT 模式的工作流程。本文基于 v0.8.1。
aoho求索
2019/12/15
1.6K0
seata TC启动流程分析
seata-server 启动方法 io.seata.server.Server#main,默认启动端口 SERVER_DEFAULT_PORT = 8091。main方法主要是解析并设置一些配置,初始化几个线程池,启动DefaultCoordinator和Netty服务等,源码如下:
luoxn28
2021/01/28
8750
seata TC启动流程分析
推荐阅读
相关推荐
详解分布式事务之 Seata-Client 原理及流程
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档