Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tommy131/owotools
A Repository for OwOBlog in JavaScript.
https://github.com/tommy131/owotools
console frontend javascript js logger owoblog tools web web-tools
Last synced: 3 months ago
JSON representation
A Repository for OwOBlog in JavaScript.
- Host: GitHub
- URL: https://github.com/tommy131/owotools
- Owner: Tommy131
- License: apache-2.0
- Created: 2022-03-10T22:11:18.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-06-19T23:26:15.000Z (over 2 years ago)
- Last Synced: 2023-07-27T20:26:28.917Z (over 1 year ago)
- Topics: console, frontend, javascript, js, logger, owoblog, tools, web, web-tools
- Language: JavaScript
- Homepage:
- Size: 252 KB
- Stars: 12
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# OwOTools
Open source license :  [Learn More](https://opensource.org/licenses/Apache-2.0)
A Repository for OwOBlog in JavaScript.
一个来自OwOBlog的神奇仓库.
持续更新中... 请给一个Star表示支持我吧QWQ
友情项目地址: [OwOFrame](https://github.com/OwOBlogTeam/OwOFrame)
------
## Usage | 用法
### 1. [Object:Logger]
```js
// 常规输出;
logger.info('Hello World~');
// 提示输出;
logger.notice('Hello World~');
// 带彩色的输出 (可用于成功执行指定操作时输出此日志);
logger.success('Hello World!');
// 警告输出 (带默认的高亮);
logger.warning('Hello World!');
// 警告提示 (可以选择是否弹窗);
logger.alert('Hello World!', /* boom: boolean, default: false */);
// 错误提示, 使用常规Log格式输出;
logger.error('Hello World!');
// 紧急错误提示, 使用 Error等级格式输出 (与alert一样，可以选择是否弹窗);
logger.emergency('Hello World!' /* boom: boolean, default: false */);
// Settings 的默认配置如下:
const logger = {
settings: {
useDate: true,
useTime: false,
}
};
```
效果如下 (默认配置):
启用时间输出的效果如下:
```js
logger.settings.useDate = true;
logger.settings.useTime = true;
```
可以关闭默认的日期输出, 使用如下方法:
```js
logger.settings.useDate = false; // 关闭日期输出;
logger.settings.useTime = false; // 关闭时间输出;
```
效果如下:
> 注意: 当 `logger.settings.useDate` 为 `false` 时, 将不会输出所有日期的格式.
### 2. [Object:OwO]
一个通用方法合集. 目前开发进度如下:
- [x] 模拟睡眠方法 (`owo.sleep(second: int|float)`)
- [x] 高亮容器方法 (`owo.highlight.select(elementName: string, func: callable)`)
#### §2.1 `owo.sleep()`
此方法采用 `async/await` 模式通过在 `Promise` 下的异步操作模拟睡眠.
具体用法如下:
```js
// 打开 logger 中的时间显示作为参考;
logger.settings.useTime = true;
logger.info(logger.date());
await owo.sleep(1);
logger.info(logger.date());
await owo.sleep(1);
logger.info(logger.date());
```
运行截图:
#### §2.2 `owo.highlight.select()`
一个方便快速找到指定元素的函数. 目前实现的功能比较粗糙简陋, 仅仅使用了 `border` 来修改元素的边框. 预计的工作列表如下:
- [x] 高亮部分显示
- [x] 控制台输出
- [x] 移除高亮部分的函数
- [ ] 鼠标悬浮时显示一些元素的细节 (例如`高度`, `宽度`, 元素`className`/`id`)
范例代码如下:
```js
document.write('
一个容器');
const element = owo.highlight.select('#test').shoot((highlight) => {
console.log(highlight.selector); // 由 owo.highlight 返回获取到的元素; 如果获取不到则返回NULL;
});
```
效果如下:
同样可以使用 `remove()` 方法移除高亮部分.
```js
owo.highlight.select('#test').remove();
```
效果如下:
------
## Statement
© 2016-2022 [`OwOBlog-DGMT`](https://www.owoblog.com). Please comply with the open source license of this project for modification, derivative or commercial use of this project.
> My Contacts:
- Website: [`HanskiJay`](https://www.owoblog.com)
- Telegram: [`HanskiJay`](https://t.me/HanskiJay)
- E-Mail: [`HanskiJay`](mailto:[email protected])