【免费】JS-Terminal，仿windowsterminal命令行资源-CSDN文库

共5个文件

ttf：3个

png：1个

html：1个

需积分: 0 85 浏览量 2024-09-21 17:50:55 上传评论 1 收藏 850KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

command.zip （5个子文件）

CascadiaMono.ttf 698KB

index.html 12KB

consola.ttf 448KB

CascadiaCode.ttf 721KB

powershell.png 2KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> @font-face { font-family: 'CascadiaMono'; src: url('http://wp.cc/wp-content/themes/momaking/assets/fonts/CascadiaMono.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'consola'; src: url('http://wp.cc/wp-content/themes/momaking/assets/fonts/consola.ttf') format('truetype'); font-weight: 500; font-style: normal; } body { margin: 0; font-family: 'consola'; overflow: hidden; } .command-wrap { width: 100%; height: 100vh; border-radius: 10px; background-color: #2e2e2e; overflow: hidden; } .command-head { height: 40px; display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 10px; } .command-head .item { display: flex; align-items: center; min-width: 140px; height: 30px; background-color: #0c0c0c; color: #f1f1f1; font-size: 12px; padding-left: 8px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .command-head .item .icon { width: 16px; height: 16px; margin-right: 4px; } .command-content { width: 100%; height: calc(100% - 40px); overflow-y: auto; background-color: #0c0c0c; color: #ccc; font-size: 28px; padding: 12px; font-weight: 400; position: relative; white-space: normal; box-sizing: border-box; } /* 滚动条 */ .command-content::-webkit-scrollbar { width: 10px; } .command-content::-webkit-scrollbar-thumb { background-color: #9f9f9f; border-radius: 10px; } .command-content::-webkit-scrollbar-track { background-color: #0c0c0c; border-radius: 10px; } .cursor { width: 2px; height: 1.2rem; background-color: #ccc; position: relative; top: 2px; display: inline-block; animation: blink 1s step-start infinite; user-select: none; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .command-content pre { margin: 0 0 2px 0; font-family: 'consola'; white-space: pre-wrap; word-break: break-all; } .command-content pre .line { padding-right: 2px; } </style> </head> <body> <div class="command-wrap"> <div class="command-head"> <div class="item"> <img class="icon" src="http://wp.cc/wp-content/themes/momaking/assets/images/powershell.png" /> <span>PowerShell</span> </div> </div> <div class="command-content" tabindex="0"> <pre>PowerShell 7.4.5</pre> <pre><span class="line">PS C:\Users\joysa\Desktop\command></span></pre> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const commandContent = document.querySelector('.command-content') let lastPre = commandContent.lastElementChild let cursor let dir = 'C:\\Users\\joysa\\Desktop\\command' function initCursor() { // 删除所有光标 const cursors = document.querySelectorAll('.cursor') cursors.forEach((cursor) => { cursor.remove() }) let lastPre = commandContent.lastElementChild cursor = document.createElement('div') cursor.className = 'cursor' cursor.style.left = '0px' // 更新光标位置 lastPre.appendChild(cursor) } function moveCursorToPosition(index) { if (cursor) cursor.remove() cursor = document.createElement('span') cursor.className = 'cursor' lastPre.insertBefore(cursor, lastPre.childNodes[index + 1] || null) } function newLine() { const pre = document.createElement('pre') const span = document.createElement('span') span.className = 'line' span.textContent = `PS ${dir}>` pre.appendChild(span) commandContent.appendChild(pre) inputIndex = 0 initCursor() lastPre = pre autoScroll() } function curl(url) { fetch(url) .then((response) => response.text()) .then((data) => { print(data) }) .catch((error) => { print(`curl: ${url} - ${error}`, '#e74856') }) .finally(() => { newLine() initCursor() }) } function changeDir(a) { dir = a.replace('cd ', '').replace('>', '').trim() newLine() } function autoScroll() { commandContent.scrollTop = commandContent.scrollHeight } async function print(content, color = '#ccc') { const pre = document.createElement('pre') pre.textContent = content // 设置配置 pre.style.color = color commandContent.appendChild(pre) autoScroll() return pre } function getCommand(dom) { var _dir = dom.querySelector('.line').textContent.split(' ')[1].replace('>', '') var spans = dom.querySelectorAll('span') var command = '' spans.forEach((span) => { if (span.className !== 'line') { command += span.textContent } }) return { dir: _dir, command, } } let isExecuting = false async function execCommand(dir, command) { isExecuting = true return new Promise((resolve) => { // 模拟异步执行 setTimeout(() => { switch (command) { case 'ls': print(`ls: ${dir}`) break case 'dir': print(`Directory: ${dir} Mode LastWriteTime Length Name ---- ------------- ------ ---- d---- 2024/7/3 15:20 .cache d---- 2024/9/11 14:18 .codeverse d---- 2024/5/14 9:43 .conda d---- 2024/5/24 14:17 .config d---- 2024/8/27 17:17 .cursor d---- 2024/8/27 17:12 .cursor-tutor d---- 2024/8/27 17:12 .cursor-tutor-1 d---- 2024/8/27 17:12 .cursor-tutor-2 d---- 2024/7/24 9:58 .ipython d---- 2024/7/24 10:26 .jupyter d---- 2024/9/21 11:12 .lingma d---- 2024/9/11 14:19 .marscode d---- 2024/7/24 15:09 .matplotlib d---- 2024/9/18 8:52 .MUMUVMM d---- 2024/8/26 14:56 .redhat d---- 2024/9/5 16:34 .ssh d---- 2024/5/14 8:34 .vscode d-r-- 2024/5/13 19:09 Contacts d-r-- 2024/9/20 18:30 Desktop d-r-- 2024/9/18 8:54 Documents d-r-- 2024/9/20 18:02 Downloads d-r-- 2024/5/13 19:09 Favorites d---- 2024/5/14 8:30 Intel d-r-- 2024/5/13 19:09 Links d---- 2024/9/12 14:12 miniforge3 d-r-- 2024/9/18 13:54 Music d---- 2024/6/4 10:17 node_modules lar-- 2024/9/14 11:16 OneDrive d-r-- 2024/9/3 11:29 Pictures d-r-- 2024/5/13 19:09 Saved Games d-r-- 2024/5/14 8:57 Searches d-r-- 2024/9/3 8:49 Videos -a--- 2024/6/24 14:19 43 .codex -a--- 2024/5/24 14:57 168 .gitconfig -a--- 2024/6/4 10:16 0 .node_repl_history -a--- 2024/8/

评论收藏

内容反馈