国家纪念日使网站灰化
这里我们需要借助moment这个库来实现
import moment from 'moment' const memorial = () => { let now = moment().locale('zh-cn').format('MM-DD'); if ( now === '04-04' || // 清明 now === '05-12' || // 汶川大地震 now === '12-13' // 南京大屠杀 ) { // 灰化 document.getElementsByTagName('html')[0].style = 'filter: grayscale(100%);' } } export default memorial
网络异常，图片无法展示
|
控制台输入各式各样的文字 / 图案
// 控制台的显示内容 console.log('%c 欢迎来到 昊淼Blog! ', 'background: rgba(18, 141, 244, 0.1); color: #1890ff'); console.log('%c 如果你看到了这里，你一定具有一颗追求编程的心，让我们一起加油吧！', 'color: #1890ff');
网络异常，图片无法展示
|
主要就是通过%c 为打印内容定义样式。%c后面的内容将应用我们设置的样式。
这里提供一些网站为我们生成特殊图案。
鼠标点击飘出字体
animationend事件是当css3动画执行完毕后会被触发。
let index = 0; const fnTextPopup = (event) => { let arr = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善'] if (!arr || !arr.length) { return; } // 获取鼠标点击的位置 let x = event.pageX, y = event.pageY; let eleText = document.createElement('span'); eleText.className = 'text-popup'; eleText.style.color = `rgb(${Math.random() * 256}, ${Math.random() * 256}, ${Math.random() * 256})` document.documentElement.appendChild(eleText); if (arr[index]) { eleText.innerHTML = arr[index]; } else { index = 0; eleText.innerHTML = arr[0]; } // 动画结束后删除自己 eleText.addEventListener('animationend', function () { eleText.parentNode.removeChild(eleText); }); // 位置(让其处于鼠标点击的中心位置) eleText.style.left = (x - eleText.clientWidth / 2) + 'px'; eleText.style.top = (y - eleText.clientHeight) + 'px'; // index递增 index++; }; document.documentElement.addEventListener('click', fnTextPopup, false)
css样式
/* 鼠标点击样式 */ .text-popup { position: absolute; z-index: 99; animation: textPopup 2s; /* color: #69c3da; */ user-select: none; white-space: nowrap; } @keyframes textPopup { 0%, 100% { opacity: 0; } 5% { opacity: 1; } /* 开始到动画结束时，上偏50px */ 100% { transform: translateY(-50px); } }
网络异常，图片无法展示
|
切换主题
- 可以写多套css代码，切换主题时，去请求对应的css代码即可。
- css变量 + setProperty
通过定义css变量，我们在设置样式时，都通过css变量去设置。这样我们在切换主题时就可以直接修改变量来达到效果。
一般将css变量放在根dom下。因为这里的变量可以被全部元素使用。全局css变量。
:root { --theme_font: #fff; --theme_bg: #f00; }
点击切换主题的按钮，修改css变量。
document.styleSheets[0].cssRules[0].style.setProperty("--theme_font", "#000")
一个小demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> :root { --font-color: #000; --border-color: #f6de06; --bg-color: #fff; } p { color: var(--font-color); background: var(--bg-color); border: 2px solid var(--border-color); } </style> </head> <body> <p>一个小demo</p> <button id="light">切换主题（亮）</button> <button id="dark">切换主题（暗）</button> <script> const light = document.getElementById("light") const dark = document.getElementById("dark") const lightTheme = { "--font-color": "#000", "--border-color": "#f6de06", "--bg-color": "#fff" } const darkTheme = { "--font-color": "#fff", "--border-color": "#f00", "--bg-color": "#000" } light.addEventListener("click", function() { Object.keys(lightTheme).forEach(item => { document.styleSheets[0].cssRules[0].style.setProperty(item, lightTheme[item]) }) }) dark.addEventListener("click", function() { Object.keys(darkTheme).forEach(item => { document.styleSheets[0].cssRules[0].style.setProperty(item, darkTheme[item]) }) }) </script> </body> </html>
