Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

简单UI优化 #1

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

简单UI优化 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3a3f294
简单UI优化
totoropcbeta Oct 24, 2024
1e5853c
增加时间转换格式
Oct 25, 2024
0b8c510
月日格式
Oct 25, 2024
4de2439
null
totoropcbeta Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
},
"description": "时间戳转换小工具。右键菜单显示转化，工具页时间戳转化",
"manifest_version": 2,
"name": "时间戳转化",
"name": "时间戳转换",
"content_scripts": [
{
"matches": [
Expand Down
223 changes: 162 additions & 61 deletions src/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,97 +1,198 @@
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>小工具</title>
<title>时间戳转换小工具</title>
</head>
<style>
/* 全局样式 */
body {
min-width: 400px;
font-family: "Microsoft YaHei", "Arial", "Times New Roman", sans-serif;
/* 使用现代字体 */
background-color: #f7f7f7;
/* 浅灰色背景 */
color: #333;
/* 文字颜色 */
margin: 0;
/* padding: 0px; */
line-height: 1.0;
}

/* 容器样式 */
.tab {
min-width: 450px;
height: auto;
/* margin: 0 auto; */
background: #fff;
/* 白色背景 */
padding: 10px;
border-radius: 2px;
/* 圆角边框 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* 轻微阴影 */
}

/* 输入框样式 */
.input {
min-width: 190px;
width: 220px;
padding: 5px;
margin-left: 0px;
margin-bottom: 10px;
border: 1px solid #ddd;
/* 边框颜色 */
border-radius: 4px;
/* 圆角 */
font-size: 14px;
/* 字体大小 */
box-sizing: border-box;
/* 盒模型 */
}

#gap {
max-width: 40px;
/* 按钮样式 */
.button {
padding: 5px;
margin-right: 5px;
border: none;
border-radius: 4px;
background-color: #C8C8C8;
/* 按钮背景颜色 */
color: black;
font-size: 12px;
cursor: pointer;
transition: background-color 0.3s ease;
/* 过渡效果 */
}

.button:hover {
background-color: #356BFD;
/* 鼠标悬停时的背景颜色 */
}

/* 复选框和标签样式 */
label {
/* margin-right: 0px; */
margin-bottom: 10px;
font-size: 16px;
/* 字体大小 */
}

input[type="checkbox"],
input[type="radio"] {
size: 5px;
padding: 5px;
/* margin-right: 0px; */
}

#timestamp-now {
max-width: 100px;
span {
font-size: 16px;
}

/* 提示文本样式 */
#tip {
color: #666;
/* 提示文本颜色 */
/* font-style: italic; */
/* 斜体 */
font-size: 12px;
margin-top: 10px;
}

/* 消息文本样式 */
#msg {
color: #000000;
font-size: xx-small;
-moz-user-select: none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
font-size: 14px;
/* 字体大小 */
color: #d9534f;
/* 错误消息颜色 */
}

#gap {
max-width: 60px;
}

.form-row select {
margin-right: 10px;
padding: 2px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
</style>

<body>
<div>
<div class="tab">
<div>
<div>
<div class="tab">
<div>
<label for="timestamp-now">当前的时间戳</label>
<input id="timestamp-now" readonly>
<button id="copy_timestamp" type="button" class="button">复制</button>

<label for="gap">刷新间隔</label>
<input id="gap" value="1000">
<div>
<label for="timestamp-now">当前的时间戳:</label>
<input id="timestamp-now" class="input" readonly>
<button id="copy_timestamp" type="button" class="button">复制</button>
<button id="refresh" class="button">刷新</button>
</div>

<label for="goon">实时</label>
<input id="goon" type="checkbox">
<div>
<label for="bjTime">当前北京时间:</label>
<input id="bjTime" class="input" readonly>
<button id="copy_time" type="button" class="button">复制</button>
</div>
</div>


<div>
<label for="bjTime">当前北京时间</label>
<input id="bjTime" class="input" readonly>
<button id="copy_time" type="button" class="button">复制</button>
<button id="refresh">刷新</button>
</div>
</div>
<div>
<label for="input">输入:</label>
<input id="input" class="input" placeholder="[10/13位时间戳]/[年月日时分秒]">
<button id="paste" class="button">粘贴</button>
<button id="now" class="button">此时</button>
<button id="exchange-each-other" class="button">交换</button>
</div>

<br>
<div>
<label for="result">输出:</label>
<input id="result" class="input" placeholder="这里是转换后的结果" readonly>
<button id="copy_result" class="button">复制</button>
<button id="change" class="button">转换</button>
<button id="clear" class="button">清空</button>
</div>
</div>

<div>
<div>
<label for="input">输入：</label>
<input id="input" class="input" placeholder="[10/13位时间戳]/[年月日时分秒]">
<button id="paste" class="button">粘贴</button>
<button id="now" class="button">now</button>
<button id="exchange-each-other" class="button">交换</button>
<label for="show-alert-checkbox" style="line-height: 25px;">右键菜单单击是否alert</label><input
id="show-alert-checkbox" type="checkbox" name="menu-action">
<br />
<label for="gap" style="line-height: 25px;">刷新间隔</label>
<input id="gap" value="1000" type="number" step="100" min="100">

<label for="goon">实时</label>
<input id="goon" type="checkbox">
<br />
<span style="line-height: 25px;">时间戳位数判断:</span>
<label for="only-10-radio">仅10位</label><input type="radio" id="only-10-radio"
name="timestamp-judge-type">
<label for="only-13-radio">丨仅13位</label><input type="radio" id="only-13-radio"
name="timestamp-judge-type">
<label for="both-10-13-radio">丨10/13位</label><input type="radio" id="both-10-13-radio"
name="timestamp-judge-type">
</div>
<div class="form-row">
<label for="time_format" style="line-height: 25px;">转换时间格式:</label>
<select id="time_format">
<option value='yyyy-MM-dd HH:mm:ss' id="datetime">yyyy-MM-dd HH:mm:ss</option>
<option value='yyyy-MM-dd' id="date">yyyy-MM-dd</option>
<option value='yyyyMMdd' id="datekey">yyyyMMdd</option>
</select>
</div>

<div>
<label for="result">输出：</label>
<input id="result" class="input" placeholder="这里是输出的结果" readonly>
<button id="copy_result" class="button">复制</button>
<button id="change" class="button">转化</button>
<button id="clear" class="button">清空</button>
<span id="tip" style="line-height: 25px;">小提示：鼠标滚轮中键点击可以复制或者粘贴，年月日时分秒字符串的分隔符不限</span>
</div>
<div>
<span id="msg" style="line-height: 25px;">　</span>
</div>
</div>

<div>
<label for="show-alert-checkbox">右键菜单单击是否alert</label><input id="show-alert-checkbox" type="checkbox" name="menu-action">
<br/>
<span >时间戳位数判断：</span>
<label for="only-10-radio">仅10位</label><input type="radio" id="only-10-radio" name="timestamp-judge-type">
<label for="only-13-radio">丨仅13位</label><input type="radio" id="only-13-radio" name="timestamp-judge-type">
<label for="both-10-13-radio">丨10/13位</label><input type="radio" id="both-10-13-radio" name="timestamp-judge-type">
</div>

<div>
<span id="tip" style="font-size: xx-small; color: #808080; ">小提示：鼠标滚轮中键点击可以复制或者粘贴，年月日时分秒字符串的分隔符不限</span>
</div>
<div>
<span id="msg">　</span>
</div>
<script src="utils.js"></script>
<script src="scripts.js"></script>
</div>
<script src="utils.js"></script>
<script src="scripts.js"></script>
</div>
</body>

</html>
54 changes: 42 additions & 12 deletions src/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
let now;
let goStatus = true;
let interval;
let gap = 1000;
let gap = localStorage.getItem("gapValue") === null ? 1000 : localStorage.getItem("gapValue");

let msgSpan = document.getElementById("msg");

Expand All @@ -11,6 +11,7 @@ let timestampNowInput = document.getElementById("timestamp-now");
let resultInput = document.getElementById("result");
let goonCheckBox = document.getElementById("goon");
let gapInput = document.getElementById("gap");
gapInput.value = gap;

let refreshButton = document.getElementById("refresh");
let changeButton = document.getElementById("change");
Expand All @@ -27,6 +28,11 @@ let only10Radio = document.getElementById("only-10-radio");
let only13Radio = document.getElementById("only-13-radio");
let both10_13 = document.getElementById("both-10-13-radio");

let timeFormatSelected = document.getElementById("time_format");

let datetimeoption = document.getElementById("datetime");
let dateoption = document.getElementById("date");
let datekeyoption = document.getElementById("datekey");

function getTimestamp13() {
return now.getTime();
Expand Down Expand Up @@ -98,17 +104,13 @@ inputInput.oninput = function () {
change();
};

gapInput.oninput = function () {
gapInput.addEventListener('change', function (event) {
var gapValue = event.target.value;
console.log("gapValue:", gapValue);
localStorage.setItem("gapValue", gapValue);
refreshGap();
};

gapInput.onkeypress = function (e) {
refreshGap();

if (e.keyCode === 13) {
refreshWithInterval();
}
};
refreshWithInterval();
});

resultInput.oninput = function () {
let value = resultInput.value;
Expand Down Expand Up @@ -199,6 +201,12 @@ both10_13.onclick = function () {
localStorage.timestampJudgeType = "3";
};

timeFormatSelected.addEventListener('change', function (event) {
var format = event.target.value;
console.log('转换时间格式选中的值:', format);
localStorage.setItem("timeFormatSelected", format);
});

function loadTimestampJudgeType() {
let timestampJudgeType = localStorage.timestampJudgeType;
switch (timestampJudgeType) {
Expand Down Expand Up @@ -227,6 +235,25 @@ function loadMenuRadioAction() {
showAlertCheckbox.checked = !(localStorage.showAlert === "false");
}

function loadTimeFormatSelected() {
var timeFormatSelected = localStorage.getItem("timeFormatSelected");
console.log("timeFormatSelected:", timeFormatSelected);
switch (timeFormatSelected) {
case "yyyy-MM-dd HH:mm:ss":
datetimeoption.selected = true;
break;
case "yyyy-MM-dd":
dateoption.selected = true;
break;
case "yyyyMMdd":
datekeyoption.selected = true;
break;
default:
datetimeoption.selected = true;
break;
}
}

function getInterval() {
return setInterval(function () {
if (goStatus) {
Expand All @@ -238,11 +265,14 @@ function getInterval() {
refresh();
inputInput.focus();

inputInput.value = localStorage.selectText;
resultInput.value = "";
inputInput.value = "";
change();

loadGoonStatus();

loadTimeFormatSelected();

loadMenuRadioAction();

loadTimestampJudgeType();
Expand Down
Loading