免费开源-“灵感碎碎集-日常PC离线版”
# 灵感碎碎集-日常PC离线版：捕捉灵感的魔法盒子🎁## 简介
Inspiration Bits - Daily PC Offline Version is like a magical box🎁 that sits on your PC, always ready to capture those elusive and fleeting moments of inspiration that often vanish before you can grab them. It's your personal idea catcher, ensuring that every spark of creativity, no matter how small, is safely stored and at your fingertips whenever you need it😎.
灵感碎碎集 - 日常PC离线版就像是放在你电脑里的一个魔法盒子🎁，时刻准备着捕捉那些难以捉摸、稍纵即逝的灵感瞬间，这些瞬间常常在你抓住它们之前就消失了。它是你的个人创意捕捉器，确保每一个创意的火花，无论多么微小，都能被安全地储存起来，并且在你需要的时候触手可及😎。
## 使用说明书
### 1. 主题随心变🌈
- **操作方法**：嘿😉，瞧！在页面顶部的导航栏那里，轻轻一点“切换到深色主题”或者“切换到浅色主题”的按钮，就能瞬间给你的灵感世界换个“皮肤”啦😎！
- **作用**：是不是有时候觉得光线太刺眼👀或者太暗，影响你和灵感的亲密接触呢😕？别担心，这个功能就像给你的眼睛戴上了一副舒适的墨镜🕶或者打开了一盏柔和的台灯💡。白天光线强的时候，切换到深色主题，眼睛不累；晚上光线暗了，浅色主题让一切清晰又温馨。就这么简单，让你随时随地都能在最舒适的视觉环境里，和灵感尽情玩耍🎉。
### 2. 灵感闪电存⚡
- **操作方法**：当灵感像闪电一样击中你的时候，赶紧在那个大大的输入框里把它敲下来，然后潇洒地点击“添加灵感”按钮✨。
- **作用**：你知道那种感觉吗😏？灵感就像调皮的小精灵🧚，突然冒出来又跑得飞快。有了这个功能，就像给小精灵们准备了一个温馨的小窝🏠，它们再也逃不掉啦😜！不管是你突然想到的一个超酷的创业点子💡、一句超美的诗句📜，还是明天要做的事情清单📋，都能迅速被抓住，再也不用担心它们消失在记忆的黑洞里，是不是超棒👍？
### 3. 灵感精准搜🔍
- **操作方法**：在搜索框里输入你脑海中那个模糊又关键的关键词，然后看👀！包含这个关键词的灵感就像听话的小士兵一样整齐地排列出来啦😎。
- **作用**：随着时间的推移，你的灵感越来越多，就像一个装满宝藏的大箱子🎁，东西太多有时候找起来真让人头疼😩。这个搜索功能就像给你一把神奇的钥匙🔑，能让你迅速打开宝藏箱，找到你最需要的那颗“灵感宝石”💎。无论是你正在写一篇文章✍想找相关的灵感素材，还是回忆之前某个项目的想法💡，它都能在瞬间帮你搞定，是不是感觉自己像个拥有超能力的寻宝者🧐？
### 4. 排序有妙招🎯
- **操作方法**：看看这里👀，轻轻一点“按星级排序”或者“按顺序排序”的按钮，灵感列表就会像变魔术一样重新排列整齐✨。
- **作用**：当你的灵感多到像星星一样数不过来的时候✨，你是想先看到最闪亮的那些（按星级排序🌟），还是想按照它们来到你身边的先后顺序回味一下呢（按顺序排序📝）？这个功能就像你的灵感小管家👨✈️，让你可以随心所欲地整理你的灵感大军，让每一个灵感都在最适合的位置等待你的召唤，是不是很贴心😘？
### 5. 星级定轻重✨
- **操作方法**：在每一条灵感记录旁边，看到那两个可爱的“+”和“-”按钮了吗😉？根据你对这个灵感的喜爱程度或者重要性，点一点它们就能调整星级啦🌟。
- **作用**：有些灵感就像超级明星🌟，闪闪发光，值得重点关注；而有些可能只是个小配角，但也有它的可爱之处😊。通过星级评定，你就像给每个灵感颁发了一个专属勋章🥇，让重要的灵感更加耀眼，也能清楚地分辨出哪些灵感需要优先处理，哪些可以稍后再看。这样一来，你的灵感世界就变得井井有条，你也能更高效地利用这些宝贵的创意资源啦，是不是感觉自己像个创意大师在指挥灵感的交响乐团🎶？
### 6. 灵感轻松删🗑
- **操作方法**：如果某个灵感已经完成了它的使命，或者你觉得它不再有价值了，别犹豫，在它的右侧找到那个醒目的“删除”按钮🗑，轻轻一点，它就会消失不见啦😉。
- **作用**：就像整理你的衣柜一样👕，旧的不去，新的不来。当你的灵感列表里堆满了不再需要的东西，是不是感觉有点乱糟糟的😣？这个删除功能就像一个魔法扫帚🧹，帮你把那些不需要的灵感灰尘清扫干净，让你的灵感空间永远保持清爽整洁，只留下最有用、最精彩的灵感，为新的创意腾出更多的空间，让你的创意之旅更加轻松愉快，是不是很解压😎？
**********欢迎大佬狠狠拍砖！！！感谢感谢！！！代码如下：{:300_965:}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>灵感碎碎集</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
margin: 0;
font-family: 'Noto Sans SC', sans-serif;
background-color: #f5f5dc; /* 白色的烟 */
color: #333;
transition: background-color 0.3s, color 0.3s;
}
.app.dark {
background-color: #1a1a2e; /* 深空闪耀 */
color: #e0e0eb;
}
header {
padding: 1rem;
text-align: center;
background-color: #d2b48c; /* 桑迪·布朗 */
color: white;
position: sticky;
top: 0;
z-index: 1000;
}
.input-container,
.search-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1rem;
}
textarea {
width: 80%;
height: 100px;
resize: vertical;
margin-right: 1rem;
padding: 0.5rem;
border-radius: 8px;
border: 1px solid #ccc;
transition: border-color 0.3s;
}
textarea:focus {
border-color: #ff8c69; /* 浅珊瑚色 */
outline: none;
}
button {
padding: 0.5rem 1rem;
border: none;
border-radius: 8px;
background-color: #ffa500; /* 淡橙色 */
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #ff7f50; /* 浅珊瑚色 */
}
.search-container input {
width: 80%;
padding: 0.5rem;
border-radius: 8px;
border: 1px solid #ccc;
transition: border-color 0.3s;
margin-right: 1rem;
}
.search-container input:focus {
border-color: #ff8c69; /* 浅珊瑚色 */
outline: none;
}
.sort-button {
background-color: #d2b48c; /* 桑迪·布朗 */
color: white;
}
.sort-button:hover {
background-color: #b8860b; /* 更深的桑迪·布朗 */
}
.inspiration-list {
list-style-type: none;
padding: 0;
max-height: calc(100vh - 150px);
overflow-y: auto;
}
.inspiration-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
border-bottom: 1px solid #ddd;
transition: background-color 0.3s;
}
.inspiration-list li:hover {
background-color: rgba(255, 165, 0, 0.1); /* 淡橙色半透明 */
}
.inspiration-list p {
margin: 0;
flex-grow: 1;
}
.inspiration-list button {
margin-left: 1rem;
background-color: #ff4500; /* 深珊瑚色 */
transition: background-color 0.3s;
}
.inspiration-list button:hover {
background-color: #ff1493; /* 浅珊瑚色 */
}
.rating-controls {
display: flex;
gap: 0.5rem;
align-items: center;
}
.rating-label {
font-weight: bold;
}
.rating-buttons {
display: flex;
gap: 0.2rem;
}
.rating-buttons button {
padding: 0.3rem 0.6rem;
border: none;
border-radius: 50%;
background-color: #d2b48c; /* 桑迪·布朗 */
color: white;
cursor: pointer;
transition: background-color 0.3s;
font-size: 1rem;
}
.rating-buttons button:hover {
background-color: #b8860b; /* 更深的桑迪·布朗 */
}
.empty-state {
text-align: center;
margin-top: 2rem;
opacity: 0.8;
}
.empty-state i {
font-size: 2rem;
margin-bottom: 1rem;
}
.highlight {
background-color: yellow;
}
footer {
text-align: center;
padding: 1rem;
font-size: 0.9rem;
color: #666;
}
@media (max-width: 768px) {
textarea, .search-container input {
width: 90%;
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
.loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.loader svg {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
::selection {
background-color: #ffa500; /* 淡橙色 */
color: white;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const { useState, useEffect } = React;
const InspirationBox = () => {
const = useState([]);
const = useState('');
const = useState('');
const = useState('light');
const = useState(false);
const = useState(false);
useEffect(() => {
setIsLoading(true);
const savedData = JSON.parse(localStorage.getItem('inspirations')) || [];
setTimeout(() => {
setInspirations(savedData);
setIsLoading(false);
}, 500);
}, []);
useEffect(() => {
localStorage.setItem('inspirations', JSON.stringify(inspirations));
}, );
const addInspiration = () => {
if (inputValue.trim()) {
setInspirations(prev => [...prev, { id: Date.now(), text: inputValue, rating: 1 }]);
setInputValue('');
}
};
const deleteInspiration = (id) => {
setInspirations(prev => prev.filter(inspiration => inspiration.id !== id));
};
const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
};
const highlightSearch = (text) => {
const parts = text.split(new RegExp(`(${searchTerm})`, 'gi'));
return parts.map((part, index) =>
part.toLowerCase() === searchTerm.toLowerCase() ? (
<span key={index} className="highlight">{part}</span>
) : (
part
)
);
};
const rateInspiration = (id, delta) => {
setInspirations(prev => prev.map(inspiration =>
inspiration.id === id ? {
...inspiration,
rating: Math.max(1, Math.min(5, inspiration.rating + delta))
} : inspiration
));
};
const sortedInspirations = sortByRating
? [...inspirations].sort((a, b) => b.rating - a.rating)
: inspirations;
if (isLoading) {
return (
<div className="loader">
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" stroke="#ffa500" stroke-width="5" stroke-dasharray="125.66" />
</svg>
</div>
);
}
return (
<div className={`app ${theme}`}>
<header>
<h1>灵感碎碎集</h1>
<button onClick={toggleTheme}>
切换到{theme === 'light' ? '深色' : '浅色'}主题
</button>
</header>
<main>
<div className="input-container">
<textarea
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="请输入您的灵感..."
/>
<button onClick={addInspiration}>添加灵感</button>
</div>
<div className="search-container">
<input
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="搜索灵感..."
/>
<button className="sort-button" onClick={() => setSortByRating(!sortByRating)}>
按{sortByRating ? '顺序' : '星级'}排序
</button>
</div>
{sortedInspirations.length === 0 && !searchTerm ? (
<div className="empty-state fade-in">
<i className="fas fa-lightbulb"></i>
<p>还没有灵感吗？快来添加一些吧！</p>
</div>
) : (
<ul className="inspiration-list">
{sortedInspirations
.filter(inspiration =>
inspiration.text.toLowerCase().includes(searchTerm.toLowerCase())
)
.map(inspiration => (
<li key={inspiration.id}>
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<p>{highlightSearch(inspiration.text)}</p>
<div className="rating-controls">
<span className="rating-label">灵感星级:</span>
<div className="rating-buttons">
<button onClick={() => rateInspiration(inspiration.id, -1)}>-</button>
<span>{inspiration.rating}</span>
<button onClick={() => rateInspiration(inspiration.id, 1)}>+</button>
</div>
</div>
</div>
<button onClick={() => deleteInspiration(inspiration.id)}>删除</button>
</li>
))}
</ul>
)}
</main>
<footer>
Design by Nong Wenlong
</footer>
</div>
);
};
ReactDOM.render(<InspirationBox />, document.getElementById('root'));
</script>
</body>
</html>
matlab250 发表于 2024-11-23 08:24
求指导，特别感兴趣 ，有没有模板或者开源资料介绍下。谢谢
可以通过以下几个步骤实现：
创建一个HTML页面：这个页面将包含用于输入数据的表单元素。
编写JavaScript代码：使用JavaScript来处理用户输入的数据，并将其导出到Excel文件。
使用第三方库：可以使用像SheetJS（也称为xlsx）这样的JavaScript库来帮助创建和操作Excel文件。
以下是两个简单的代码，你试一下。
<!DOCTYPE html>
<html>
<head>
<title>保存到Excel</title>
</head>
<body>
<h2>输入数据</h2>
<input type="text" id="dataInput" placeholder="输入数据">
<button onclick="exportToExcel()">保存到Excel</button>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="exportToExcel.js"></script>
</body>
</html>
function exportToExcel() {
const input = document.getElementById('dataInput').value;
const worksheet = XLSX.utils.aoa_to_sheet([]); // 将输入转换为工作表
const workbook = XLSX.utils.book_new(); // 创建一个新的工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 将工作表添加到工作簿
XLSX.writeFile(workbook, "data.xlsx"); // 将工作簿保存为Excel文件
}
matlab250 发表于 2024-11-23 08:24
求指导，特别感兴趣 ，有没有模板或者开源资料介绍下。谢谢
https://www.iteye.com/blog/1017401036-2258887，可以参考这个，我的好旧没弄了，好多问题。我之前就是看这个弄出来的，js好像也可以直接增删改查数据库。都是用的ActiveXObject。百度就有。360好像要兼容模式，极速模式不行。 大佬支持一下{:301_971:} 我喜欢用浏览器通过js保存在Excel里面:lol 这个挺有意思的，试试，感谢啊 不如各种笔记方便，备用 zakang 发表于 2024-11-23 03:00
我喜欢用浏览器通过js保存在Excel里面
求指导，特别感兴趣 ，有没有模板或者开源资料介绍下。谢谢 有点意思，备用 楼主太专业了，学习一下。 本地？这种不是进行网络采集吗？无源之水？