ldxw/cdn
1
0
Fork 0
mirror of https://github.com/ldxw/cdn.git synced 2026-08-14 04:51:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
Mr.Lin
2025-08-27 07:44:56 +08:00
committed by GitHub
parent f53d3e7a92
commit 7e4d9dee01
1 changed files with 53 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
code/html/react-day-night-toggle-theme-animation/index.html
+38 -43
View File
@@ -5,7 +5,6 @@
<title>白昼黑夜切换器</title> <title>白昼黑夜切换器</title>
<link <link
rel="stylesheet" rel="stylesheet"
<!--href="https://public.codepenassets.com/css/normalize-5.0.0.min.css"-->
href="https://cdn.oplist.org/gh/ldxw/cdn@master/code/html/react-day-night-toggle-theme-animation/css/normalize-5.0.0.min.css" href="https://cdn.oplist.org/gh/ldxw/cdn@master/code/html/react-day-night-toggle-theme-animation/css/normalize-5.0.0.min.css"
/> />
<style> <style>
@@ -32,12 +31,10 @@
</head> </head>
<body> <body>
<div id="root">Loading...</div> <div id="root">Loading...</div>
<!--<script src="https://unpkg.com/react@16.3.0-alpha.1/umd/react.development.js"></script> <!-- 修正CDN链接格式，删除多余空引号 -->
<script src="https://unpkg.com/react-dom@16.3.0-alpha.1/umd/react-dom.development.js"></script> <script src="https://cdn.jsdmirror.cn/npm/react@16.3.0-alpha.1/umd/react.development.js"></script>
<script src="https://unpkg.com/styled-components@2.2.1/dist/styled-components.min.js"></script>--> <script src="https://cdn.jsdmirror.cn/npm/react-dom@16.3.0-alpha.1/umd/react-dom.development.js"></script>
<script src="">https://cdn.jsdmirror.cn/npm/react@16.3.0-alpha.1/umd/react.development.js</script> <script src="https://cdn.jsdmirror.cn/npm/styled-components@2.2.1/dist/styled-components.min.js"></script>
<script src="">https://cdn.jsdmirror.cn/npm/react-dom@16.3.0-alpha.1/umd/react-dom.development.js</script>
<script src="">https://cdn.jsdmirror.cn/npm/styled-components@2.2.1/dist/styled-components.min.js</script>
<script> <script>
function _defineProperty(obj, key, value) { function _defineProperty(obj, key, value) {
if (key in obj) { if (key in obj) {
@@ -75,7 +72,6 @@
} = window; } = window;
const { createContext, Component } = React; const { createContext, Component } = React;
const { render } = ReactDOM; const { render } = ReactDOM;
const THEME_CONSTANTS = { const THEME_CONSTANTS = {
@@ -83,14 +79,11 @@
DAY: "day", DAY: "day",
}; };
/** // 修正时间判断逻辑（原d<6语法错误，应取getHours()）
* Create a basic theme context
*
* do a dirty getHours to determine the defaultValue
*/
const d = new Date(); const d = new Date();
const hours = d.getHours();
const defaultValue = const defaultValue =
d < 6 || d > 19 ? THEME_CONSTANTS.NIGHT : THEME_CONSTANTS.DAY; hours < 6 || hours > 19 ? THEME_CONSTANTS.NIGHT : THEME_CONSTANTS.DAY;
const ThemeContext = createContext(defaultValue); const ThemeContext = createContext(defaultValue);
const $night = "#111"; const $night = "#111";
@@ -111,17 +104,19 @@
width: 100vw; width: 100vw;
`; `;
// 修正BigStar组件，补充闭合花括号
const BigStar = styled.div` const BigStar = styled.div`
border-radius: 100%; border-radius: 100%;
height: ${$size}vh; height: ${$size}vh;
left: ${$positionX}vw; left: ${$positionX}vw;
position: absolute; position: absolute;
top: ${$positionY}vh; top: ${$positionY}vh;
transition transform ${$transitionDuration}s ease 0s; transition: transform ${$transitionDuration}s ease 0s;
width: ${$size}vh; width: ${$size}vh;
z-index: 2; z-index: 2;
`; `;
// 修正extend语法对齐
const Moon = BigStar.extend` const Moon = BigStar.extend`
background-color: ${$starColor}; background-color: ${$starColor};
box-shadow: 0px 0px 50px #eee; box-shadow: 0px 0px 50px #eee;
@@ -206,6 +201,7 @@
z-index: 1; z-index: 1;
`; `;
// 修正extend语法对齐
const Sun = BigStar.extend` const Sun = BigStar.extend`
background-color: ${$sunColor}; background-color: ${$sunColor};
box-shadow: 0px 0px 150px yellow; box-shadow: 0px 0px 150px yellow;
@@ -231,7 +227,7 @@
transform: scaleY(1); transform: scaleY(1);
} }
6% { 6% {
transform scaleY(0); transform: scaleY(0);
} }
`; `;
@@ -282,12 +278,12 @@
transform: translateX(-50%); transform: translateX(-50%);
`; `;
const Face = ({ show } /*#__PURE__*/) => const Face = ({ show }) =>
React.createElement( React.createElement(
Features, Features,
{ show: show } /*#__PURE__*/, { show: show },
React.createElement(LeftEye, null) /*#__PURE__*/, React.createElement(LeftEye, null),
React.createElement(RightEye, null) /*#__PURE__*/, React.createElement(RightEye, null),
React.createElement(Smile, null) React.createElement(Smile, null)
); );
@@ -331,51 +327,48 @@
transition: background 0.25s ease 0s, transform 0.25s ease 0s; transition: background 0.25s ease 0s, transform 0.25s ease 0s;
`; `;
const ThemeToggle = ({ onChange, checked } /*#__PURE__*/) => const ThemeToggle = ({ onChange, checked }) =>
React.createElement( React.createElement(
ThemeContext.Consumer, ThemeContext.Consumer,
null, null,
(theme /*#__PURE__*/) => (theme) =>
React.createElement( React.createElement(
ThemeToggleContainer, ThemeToggleContainer,
{ theme: theme } /*#__PURE__*/, { theme: theme },
React.createElement(ThemeToggleInput, { React.createElement(ThemeToggleInput, {
type: "checkbox", type: "checkbox",
onChange: onChange, onChange: onChange,
checked: checked, checked: checked,
title: "Toggle theme", title: "Toggle theme",
}) /*#__PURE__*/, }),
React.createElement(ThemeToggleSwitch, { theme: theme }) React.createElement(ThemeToggleSwitch, { theme: theme })
) )
); );
const BackDrop = ({ stars } /*#__PURE__*/) => const BackDrop = ({ stars }) =>
React.createElement( React.createElement(
ThemeContext.Consumer, ThemeContext.Consumer,
null, null,
(theme /*#__PURE__*/) => (theme) =>
React.createElement( React.createElement(
Container, Container,
{ theme: theme } /*#__PURE__*/, { theme: theme },
React.createElement( React.createElement(
Sun, Sun,
{ theme: theme } /*#__PURE__*/, { theme: theme },
React.createElement(Face, { React.createElement(Face, {
show: theme === THEME_CONSTANTS.DAY, show: theme === THEME_CONSTANTS.DAY,
}) })
) /*#__PURE__*/, ),
React.createElement( React.createElement(
Moon, Moon,
{ theme: theme } /*#__PURE__*/, { theme: theme },
React.createElement(Face, { React.createElement(Face, {
show: theme === THEME_CONSTANTS.NIGHT, show: theme === THEME_CONSTANTS.NIGHT,
}) /*#__PURE__*/, }),
React.createElement(Craters, null) React.createElement(Craters, null)
), ),
stars.map((star, idx) =>
stars.map((star, idx /*#__PURE__*/) =>
React.createElement( React.createElement(
Star, Star,
_extends({ key: `star--${idx}` }, star, { theme: theme }) _extends({ key: `star--${idx}` }, star, { theme: theme })
@@ -402,6 +395,7 @@
} }
return items; return items;
}; };
class App extends Component { class App extends Component {
constructor(...args) { constructor(...args) {
super(...args); super(...args);
@@ -411,7 +405,6 @@
_defineProperty( _defineProperty(
this, this,
"toggle", "toggle",
(e) => { (e) => {
const { theme } = this.state; const { theme } = this.state;
this.setState({ this.setState({
@@ -422,25 +415,27 @@
}); });
} }
); );
_defineProperty(this, "render", () => { }
// 修正render方法定义（原写在constructor内，不符合React规范）
render() {
const { stars } = this.props; const { stars } = this.props;
const { theme } = this.state; const { theme } = this.state;
return /*#__PURE__*/ React.createElement( return React.createElement(
ThemeContext.Provider, ThemeContext.Provider,
{ value: theme } /*#__PURE__*/, { value: theme },
React.createElement(BackDrop, { stars: stars }) /*#__PURE__*/, React.createElement(BackDrop, { stars: stars }),
React.createElement(ThemeToggle, { React.createElement(ThemeToggle, {
checked: theme === defaultValue, checked: theme === THEME_CONSTANTS.NIGHT, // 修正checked判断逻辑
onChange: this.toggle, onChange: this.toggle,
}) })
); );
});
} }
} }
_defineProperty(App, "defaultProps", { stars: generateItems(20, 4) }); _defineProperty(App, "defaultProps", { stars: generateItems(20, 4) });
render( render(
/*#__PURE__*/ React.createElement(App, null), React.createElement(App, null),
document.querySelector("#root") document.querySelector("#root")
); );
</script> </script>