murmur/demo3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加序号作为水印背景，方便识别指令顺序

Browse Source
This commit is contained in:
CSSC-WORK\murmur 2024-12-09 10:08:23 +08:00
parent 4b9678b203
commit 28a0cfb9e6
1 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
visa-scpi-example/index.html
View File

@ -18,6 +18,7 @@
gap: 10px; gap: 10px;
} }
.command-row { .command-row {
position: relative;
box-sizing: border-box; box-sizing: border-box;
height: inherit; height: inherit;
/* margin: 10px 0; */ /* margin: 10px 0; */
@ -30,6 +31,17 @@
/* width: calc(30% - 20px); */ /* width: calc(30% - 20px); */
} }
.command-row::before {
content: attr(data-index);
position: absolute;
right: 50%;
top: 20%;
transform: translateY(-50%);
font-size: 40px;
color: rgba(0, 0, 0, 0.1);
pointer-events: none;
z-index: 1;
}
.comment-input { .comment-input {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
@ -112,6 +124,10 @@
.toast.error { .toast.error {
background-color: #f44336; background-color: #f44336;
} }
.command-row.active {
background-color: rgba(173, 216, 230, 0.7) !important;
}
</style> </style>
</head> </head>
<body> <body>
@ -127,16 +143,17 @@
async function loadCommands() { async function loadCommands() {
const container = document.getElementById('commands-container'); const container = document.getElementById('commands-container');
container.innerHTML = ''; container.innerHTML = '';
const response = await fetch('commands.json'); const response = await fetch('commands.json');
commandsData = await response.json(); commandsData = await response.json();
const commentsResponse = await fetch('comments.json'); const commentsResponse = await fetch('comments.json');
const comments = await commentsResponse.json(); const comments = await commentsResponse.json();
commandsData.forEach(({ command, value }) => { commandsData.forEach(({ command, value }, index) => {
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'command-row'; row.className = 'command-row';
row.setAttribute('data-index', index + 1);
const commentDisplay = document.createElement('span'); const commentDisplay = document.createElement('span');
commentDisplay.className = 'comment-input'; commentDisplay.className = 'comment-input';
@ -171,11 +188,10 @@
input.type = 'number'; input.type = 'number';
input.value = value; input.value = value;
input.onfocus = () => { input.onfocus = () => {
// 天蓝色高亮所在div row.classList.add('active');
row.style.backgroundColor = 'lightblue';
}; };
input.onblur = () => { input.onblur = () => {
row.style.backgroundColor = ''; row.classList.remove('active');
}; };
// 与原值比较，变化则高亮 // 与原值比较，变化则高亮