一行代码写一个谷歌插件 —— Javascript
回顾 前期
【提高代码可读性】—— 手握多个代码优化技巧、细数哪些惊艳一时的策略_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相关推荐
- 动手自己写一个 xcode 插件(Xcode Source Editor Extensions)附源码
2019独角兽企业重金招聘Python工程师标准>>> 动手自己写一个 xcode插件 (暂时需要注释功能,所以简单的写一个注释插件) -----Xcode Source Edit ...
- 2020年如何写一个现代的JavaScript库
摘要: 最实用的JS库开发指南- 原文:2020年如何写一个现代的JavaScript库 作者:颜海镜 Fundebug经授权转载,版权归原作者所有. 我写过一些开源项目,在开源方面有一些经验,最近开 ...
- python画树叶-如何理解python一行代码实现一个爱心字符画?
前言 python中有个很酷的效果,一行代码实现一个爱心字符,虽说是一行代码,但是理解起来还是比较难的,括号太多,并且使用了python的一些快捷小技巧.比如三元表达式,列表生成式,字符串拼接以及一个 ...
- 用python画爱心再加一行文字_如何理解python一行代码实现一个爱心字符画?
前言 python中有个很酷的效果,一行代码实现一个爱心字符,虽说是一行代码,但是理解起来还是比较难的,括号太多,并且使用了python的一些快捷小技巧.比如三元表达式,列表生成式,字符串拼接以及一个 ...
- python画爱心原理_如何理解python一行代码实现一个爱心字符画?
前言 python中有个很酷的效果,一行代码实现一个爱心字符,虽说是一行代码,但是理解起来还是比较难的,括号太多,并且使用了python的一些快捷小技巧.比如三元表达式,列表生成式,字符串拼接以及一个 ...
- [vue-cli]vue-cli3插件有写过吗?怎么写一个代码生成插件?
[vue-cli]vue-cli3插件有写过吗?怎么写一个代码生成插件? MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vu ...
- 鸟和飞机都能飞行,使用代码写一个方法完成鸟的子类比如鹰,麻雀的飞行,还有飞机的飞行
需求:鸟和飞机都能飞行,使用代码写一个方法完成鸟的子类比如鹰,麻雀的飞行,还有飞机的飞行 /* 1:需求:鸟和飞机都能飞行,使用代码写一个方法完成鸟的子类比如鹰,麻雀的飞行,还有飞机的飞行提示:写一个 ...
- Python将一行代码写成多行和把多行代码写成一行的方法
一行代码写成多行 1.使用反斜杠连接 a, b ,c = 1, \2, 3 2.直接换行使用小括号连接 a, b ,c = (1,2, 3) 3.对于字符串使用三个单引号 a = '''1 + 2 + ...
- 如何用最简洁的css代码写一个导航栏
如何用最简洁的css代码写一个导航栏 首先我们在里面通过标签添加一个logo,然后通过标签简单的设置几个导航栏中的内容. 注:标签主要是用于设置超链接. <div><img src= ...
最新文章
- tf.reduce_max()函数的用法详解
- mysql内表和外表_Hive内表和外表的区别
- 指数级暴增、复杂场景下,揭秘百度云原生湖仓架构等系列数据产品
- 收到字节 Offer,月薪 45k,揭秘面试流程及考点
- PULSE:一种基于隐式空间的图像超分辨率算法
- HTML5:去除IE10中输入框和密码框的X按钮和小眼睛
- 关于使用墙外安卓应用
- js a标签下载文档
- oracle多表关联索引用法,关联表查询和索引使用的探讨一则
- 微型计算机cpu组成部分组成部分的功能,微处理器的组成及其各部分的功能?
- 同样的神经网络引擎,苹果A11芯片比华为麒麟970牛在哪?
- Stellarium:诱人的星相不雅察软件
- 杨忠国老师专家点评:全球5G手机销量榜出炉
- java毕业设计成品源码网站基于javaWeb停车场车辆管理系统的设计与实现|车位
- 租的服务器怎么做系统,租了服务器怎么用
- pygame 中的图形绘制函数、帧速率和文字相关知识,简单的的不得了
- $.ajax() 参数详解
- 不忘初心,历久弥坚 —— 以博客申请 纪念 码系团诞生
- BlockingQueue
- P60-前端基础HTML-表格样式
热门文章
- java判断用户是否在线_用JSP实现显示用户是否在线
- php怎么在线建excel,PHP中创建和编辑Excel表格的方法
- Java中向下转型的意义
- 钛媒体对话友盟+朋新宇:数据服务商该如何应对云时代?
- 如何在公众号文章正文添加附件?本文教你轻松实现
- 打通 “最后一公里”,百度超级链推动重庆市首张在线医保结算电子处方开出
- 【IOS】项目展示(尚未更新完)
- 2020.11.5实现了希尔伯特矩阵的范数和条件数
- 对流扩散方程 c语言编程,对流扩散方程的差分格式
- 关于 httpUrlConnection 的 setDoOutput 与 setDoInput