回顾  前期  

【提高代码可读性】—— 手握多个代码优化技巧、细数哪些惊艳一时的策略_0.活在风浪里的博客-CSDN博客代码优化对象策略https://blog.csdn.net/m0_57904695/article/details/128318224?spm=1001.2014.3001.5501

目录

技巧一:谷歌插件

第一步:

第二步:

效果:

技巧二:禁用javascript 脚本


多一句没了,少一句不行,念及此!开干


技巧一:谷歌插件

写一个暗黑主题,一建切换

第一步:

右键点击书签栏  ---》  添加网页  ---》 在网址处输入第二步

第二步:

javascript:var a = document.createElement('style');
a.innerHTML='html{background-color:#fff;filter: invert(1);}img{filter:invert(1)}';
document.head.appendChild(a)

效果:


技巧二:禁用javascript 脚本

方便调试一些网页的内容,比如你就想安静的看看控制台,网页却一直花花绿绿的弹出广告

静态图

没在控制台禁用js 点击红包可以跳出金额 如下图

禁用js 后就点不开红包了 如下图

在控制台 Ctrl+ shift + p 输入 disable javascript 禁用, 输如 enable javascript 解除禁用

禁用 

解除禁用 


有小伙伴要红包雨源码,那就贴出来,直接copy即可,需要自己准备 图片

<template><div><!-- 0-4s 随机持续时间 实现有的快有的红包持续时间慢--><divclass="envelope-rain":style="{animationDuration: Math.random() * 2 + 3 + 's',left: Math.random() * 95 + 'vw',}"v-for="n in 15":key="n":data-n="n"></div></div>
</template>
<script setup>
document.addEventListener("click", (e) => {const target = e.target;if (target.classList.contains("envelope-rain")) {target.style.background = "url(/open红包.png) no-repeat center center/80% 100%";// 获取红包金额后,红包停止下落target.style.animationPlayState = "paused";// 1:随机红包金额// target.innerHTML = "¥" + Math.floor(Math.random() * 50);// 2:获取自定义属性以循环的值作为红包金额// console.log(target.dataset.n);target.innerHTML = `<span>${target.dataset.n}</span>`;// 给span设置宽高阴影 并添加动画target.querySelector("span").style.cssText = `width: 100%;height: 100%;display: flex;justify-content: center;margin-top: 40px;font-size: 2.5rem;font-weight: bold;font-family: "楷体";font-style: italic;color: yellow;text-shadow: 8px 8px 10px red;animation: flipInY 1s;`;}
});
</script>
<style lang="scss" scoped>
.envelope-rain {position: fixed;top: 0;width: 100px;height: 100px;background: url("/红包.webp") no-repeat center center/100%;// animation:  起的名字,持续时间,运动曲线 ,延迟,播放次数,是否反方向,结束状态;animation: move linear infinite;&:hover {animation-play-state: paused;}// 红包下落动画@keyframes move {0% {transform: translateY(0);}10% {transform: translateY(10vh);}20% {transform: translateY(20vh);}30% {transform: translateY(30vh);}40% {transform: translateY(40vh);}50% {transform: translateY(50vh);}60% {transform: translateY(60vh);}70% {transform: translateY(70vh);}80% {transform: translateY(80vh);}90% {transform: translateY(90vh);}100% {transform: translateY(100vh);}}// 红包点击弹出金额动画@-webkit-keyframes flipInY {from {-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);transform: perspective(400px) rotate3d(0, 1, 0, 90deg);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;opacity: 0;}40% {-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);transform: perspective(400px) rotate3d(0, 1, 0, -20deg) scale(1.1);-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}60% {-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);transform: perspective(400px) rotate3d(0, 1, 0, 10deg) scale(1.2);opacity: 1;}80% {-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);transform: perspective(400px) rotate3d(0, 1, 0, -5deg) scale(1.5);}to {-webkit-transform: perspective(400px);transform: perspective(400px);}
}
}
</style>

一行代码写一个谷歌插件 —— Javascript相关推荐

  1. 动手自己写一个 xcode 插件(Xcode Source Editor Extensions)附源码

    2019独角兽企业重金招聘Python工程师标准>>> 动手自己写一个 xcode插件  (暂时需要注释功能,所以简单的写一个注释插件) -----Xcode Source Edit ...

  2. 2020年如何写一个现代的JavaScript库

    摘要: 最实用的JS库开发指南- 原文:2020年如何写一个现代的JavaScript库 作者:颜海镜 Fundebug经授权转载,版权归原作者所有. 我写过一些开源项目,在开源方面有一些经验,最近开 ...

  3. python画树叶-如何理解python一行代码实现一个爱心字符画?

    前言 python中有个很酷的效果,一行代码实现一个爱心字符,虽说是一行代码,但是理解起来还是比较难的,括号太多,并且使用了python的一些快捷小技巧.比如三元表达式,列表生成式,字符串拼接以及一个 ...

  4. 用python画爱心再加一行文字_如何理解python一行代码实现一个爱心字符画?

    前言 python中有个很酷的效果,一行代码实现一个爱心字符,虽说是一行代码,但是理解起来还是比较难的,括号太多,并且使用了python的一些快捷小技巧.比如三元表达式,列表生成式,字符串拼接以及一个 ...

  5. python画爱心原理_如何理解python一行代码实现一个爱心字符画?

    前言 python中有个很酷的效果,一行代码实现一个爱心字符,虽说是一行代码,但是理解起来还是比较难的,括号太多,并且使用了python的一些快捷小技巧.比如三元表达式,列表生成式,字符串拼接以及一个 ...

  6. [vue-cli]vue-cli3插件有写过吗?怎么写一个代码生成插件?

    [vue-cli]vue-cli3插件有写过吗?怎么写一个代码生成插件? MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vu ...

  7. 鸟和飞机都能飞行,使用代码写一个方法完成鸟的子类比如鹰,麻雀的飞行,还有飞机的飞行

    需求:鸟和飞机都能飞行,使用代码写一个方法完成鸟的子类比如鹰,麻雀的飞行,还有飞机的飞行 /* 1:需求:鸟和飞机都能飞行,使用代码写一个方法完成鸟的子类比如鹰,麻雀的飞行,还有飞机的飞行提示:写一个 ...

  8. Python将一行代码写成多行和把多行代码写成一行的方法

    一行代码写成多行 1.使用反斜杠连接 a, b ,c = 1, \2, 3 2.直接换行使用小括号连接 a, b ,c = (1,2, 3) 3.对于字符串使用三个单引号 a = '''1 + 2 + ...

  9. 如何用最简洁的css代码写一个导航栏

    如何用最简洁的css代码写一个导航栏 首先我们在里面通过标签添加一个logo,然后通过标签简单的设置几个导航栏中的内容. 注:标签主要是用于设置超链接. <div><img src= ...

最新文章

  1. tf.reduce_max()函数的用法详解
  2. mysql内表和外表_Hive内表和外表的区别
  3. 指数级暴增、复杂场景下,揭秘百度云原生湖仓架构等系列数据产品
  4. 收到字节 Offer,月薪 45k,揭秘面试流程及考点
  5. PULSE:一种基于隐式空间的图像超分辨率算法
  6. HTML5:去除IE10中输入框和密码框的X按钮和小眼睛
  7. 关于使用墙外安卓应用
  8. js a标签下载文档
  9. oracle多表关联索引用法,关联表查询和索引使用的探讨一则
  10. 微型计算机cpu组成部分组成部分的功能,微处理器的组成及其各部分的功能?
  11. 同样的神经网络引擎,苹果A11芯片比华为麒麟970牛在哪?
  12. Stellarium:诱人的星相不雅察软件
  13. 杨忠国老师专家点评:全球5G手机销量榜出炉
  14. java毕业设计成品源码网站基于javaWeb停车场车辆管理系统的设计与实现|车位
  15. 租的服务器怎么做系统,租了服务器怎么用
  16. pygame 中的图形绘制函数、帧速率和文字相关知识,简单的的不得了
  17. $.ajax() 参数详解
  18. 不忘初心,历久弥坚 —— 以博客申请 纪念 码系团诞生
  19. BlockingQueue
  20. P60-前端基础HTML-表格样式

热门文章

  1. java判断用户是否在线_用JSP实现显示用户是否在线
  2. php怎么在线建excel,PHP中创建和编辑Excel表格的方法
  3. Java中向下转型的意义
  4. 钛媒体对话友盟+朋新宇:数据服务商该如何应对云时代?
  5. 如何在公众号文章正文添加附件?本文教你轻松实现
  6. 打通 “最后一公里”,百度超级链推动重庆市首张在线医保结算电子处方开出
  7. 【IOS】项目展示(尚未更新完)
  8. 2020.11.5实现了希尔伯特矩阵的范数和条件数
  9. 对流扩散方程 c语言编程,对流扩散方程的差分格式
  10. 关于 httpUrlConnection 的 setDoOutput 与 setDoInput