分类 JavaScript技术下的文章

简易版网页计算器实现

作者: renguifeng
时间: 2023-02-04
分类: JavaScript技术
评论

<html>
<style>
.jisuanqi {
position: absolute;
/*定位方式，分为绝对定位absolute，相对定位relative*/
top: 10px;
/*顶部位置，单位像素px*/
left: 20px;
/*左边位置，单位像素*/
background: pink;
/*背景颜色*/
width: 500px;
/*宽度*/
height: 660px;
/*高度*/
line-height: 200px;
/*行高*/
font-size: 60px;
/*字体大小*/
text-align: center;
/*居中方式，left，center，right*/
font-family: 隶书;
/*字体*/
z-index: 1;
/*上下层级，数字越大越往上*/
}
.shurukuang {
position: absolute;
width: 460px;
height: 100px;
top: 30px;
left: 20px;
border: 1px solid black;
line-height: 100px;
text-align: left;
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.anjian1 {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 160px;
left: 20px;
}
.anjian1:hover {
background: lightblue;
}
.anjian2 {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 160px;
left: 140px;
}
.anjian2:hover {
background: lightblue;
}
.anjian3 {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 160px;
left: 260px;
}
.anjian3:hover {
background: lightblue;
}
.anjian4 {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 160px;
left: 380px;
}
.anjian4:hover {
background: lightblue;
}
.anjian5 {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 280px;
left: 20px;
}
.anjian5:hover {
background: lightblue;
}
.anjian6 {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 280px;
left: 140px;
}
.anjian6:hover {
background: lightblue;
}
.anjian7 {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 280px;
left: 260px;
}
.anjian7:hover {
background: lightblue;
}
.anjian8 {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 280px;
left: 380px;
}
.anjian8:hover {
background: lightblue;
}
.anjian9 {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 400px;
left: 20px;
}
.anjian9:hover {
background: lightblue;
}
.anjian0 {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 400px;
left: 140px;
}
.anjian0:hover {
background: lightblue;
}
.anjiana {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 400px;
left: 260px;
}
.anjiana:hover {
background: lightblue;
}
.anjianb {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 400px;
left: 380px;
}
.anjianb:hover {
background: lightblue;
}
.anjianc {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 520px;
left: 20px;
}
.anjianc:hover {
background: lightblue;
}
.anjiand {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 520px;
left: 140px;
}
.anjiand:hover {
background: lightblue;
}
.anjiane {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 520px;
left: 260px;
}
.anjiane:hover {
background: lightblue;
}
.anjianf {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 100px;
top: 520px;
left: 380px;
}
.anjianf:hover {
background: lightblue;
}
</style>
<body>
<div class="jisuanqi" onmousedown="jsqdown()" onmouseup="jsqup()">
<div id="shurukuangId" class="shurukuang"></div>
<div class="anjian1">1</div>
<div class="anjian2">2</div>
<div class="anjian3">3</div>
<div class="anjian4">4</div>
<div class="anjian5">5</div>
<div class="anjian6">6</div>
<div class="anjian7">7</div>
<div class="anjian8">8</div>
<div class="anjian9">9</div>
<div class="anjian0">0</div>
<div class="anjiana">+</div>
<div class="anjianb">-</div>
<div class="anjianc">*</div>
<div class="anjiand">/</div>
<div class="anjiane">=</div>
<div class="anjianf">C</div>
</div>
</body>
</html>
<script language="JavaScript">
/*********
 * 鼠标抬起执行的函数，恢复原来的背景色
 * ******/
function jsqup() {
var event = window.event;
event.preventDefault();
var styleName = event.target.className;
if (styleName == "jisuanqi" || styleName == "shurukuang") {
return;
}
event.target.style.background = "pink";
}
var keyType = 1;//1：普通输入，2：等号输入
/**************
 * 鼠标按下设置一个背景色
 * *************/
function jsqdown() {
var event = window.event;
event.preventDefault();
var styleName = event.target.className;
if (styleName == "jisuanqi" || styleName == "shurukuang") {
return;
}
event.target.style.background = "green";
var shuzi = event.target.innerHTML;
var shurukuang = document.getElementById("shurukuangId");
if (shuzi == "=") {
keyType = 2;
var count = eval(shurukuang.innerHTML);
shurukuang.innerHTML = shurukuang.innerHTML + "=" + count;
} else if (shuzi == "C") {
keyType = 1;
shurukuang.innerHTML = "";
} else {
if (keyType == 2) {
shurukuang.innerHTML = "";
}
keyType = 1;
shurukuang.innerHTML = shurukuang.innerHTML + shuzi;
}
}
</script>

切换盘符执行命令行

作者: renguifeng
时间: 2023-01-18
分类: JavaScript技术
评论

d:&cd D:\ShineECall\plugins\ShinePuppeteer\examples&node screenshot.js

查找可执行文件路径

作者: renguifeng
时间: 2023-01-16
分类: JavaScript技术
评论

node -e "console.log(require('puppeteer').executablePath())"

延时截图

作者: renguifeng
时间: 2023-01-13
分类: JavaScript技术
评论

D:/ShineTplEngine/wkhtmltox/bin/wkhtmltoimage.exe --width 1920 --height 1080 --javascript-delay 10000 http://localhost:3000/preview/217/index.html D:/ShineTplEngine/xampp/htdocs/preview/217/home.jpg

monaco-editor的基本使用

作者: renguifeng
时间: 2023-01-07
分类: JavaScript技术
评论

先看一下代码例子

<html>
<head>
    <style>
        #editor {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body style="margin:0px;">
    <div id="editor"></div>
    <script>
        var require = {
            paths: {
                'vs': 'package/dev/vs'
            }
        };//editor.main.nls.js editor.main.js
    </script>
    <script src="package/dev/vs/loader.js"></script>
    <script src="package/dev/vs/editor/editor.main.nls.js"></script>
    <script src="package/dev/vs/editor/editor.main.js"></script>
    <script>
        require(['vs/editor/editor.main'], function () {
            // "javascript"
            const editor = monaco.editor.create(document.getElementById('editor'), {
value:"console.log('helloworld');",
                acceptSuggestionOnCommitCharacter: true, // 接受关于提交字符的建议
                acceptSuggestionOnEnter: 'on', // 接受输入建议 "on" | "off" | "smart" 
                accessibilityPageSize: 10, // 辅助功能页面大小 Number 说明：控制编辑器中可由屏幕阅读器读出的行数。警告：这对大于默认值的数字具有性能含义。
                accessibilitySupport: 'on', // 辅助功能支持 控制编辑器是否应在为屏幕阅读器优化的模式下运行。
                autoClosingBrackets: 'always', // 是否自动添加结束括号(包括中括号) "always" | "languageDefined" | "beforeWhitespace" | "never"
                autoClosingDelete: 'always', // 是否自动删除结束括号(包括中括号) "always" | "never" | "auto"
                autoClosingOvertype: 'always', // 是否关闭改写 即使用insert模式时是覆盖后面的文字还是不覆盖后面的文字 "always" | "never" | "auto"
                autoClosingQuotes: 'always', // 是否自动添加结束的单引号 双引号 "always" | "languageDefined" | "beforeWhitespace" | "never"
                autoIndent: 'None', // 控制编辑器在用户键入、粘贴、移动或缩进行时是否应自动调整缩进
                automaticLayout: true, // 自动布局
                codeLens: false, // 是否显示codeLens 通过 CodeLens，你可以在专注于工作的同时了解代码所发生的情况 – 而无需离开编辑器。 可以查找代码引用、代码更改、关联的 Bug、工作项、代码评审和单元测试。
                codeLensFontFamily: '', // codeLens的字体样式
                codeLensFontSize: 18, // codeLens的字体大小
fontSize:18,
fontBold:true,
                colorDecorators: false, // 呈现内联色彩装饰器和颜色选择器
                comments: {
                    ignoreEmptyLines: true, // 插入行注释时忽略空行。默认为真。
                    insertSpace: true // 在行注释标记之后和块注释标记内插入一个空格。默认为真。
                }, // 注释配置
                contextmenu: true, // 启用上下文菜单
                columnSelection: false, // 启用列编辑 按下shift键位然后按↑↓键位可以实现列选择 然后实现列编辑
                autoSurround: 'never', // 是否应自动环绕选择
                copyWithSyntaxHighlighting: true, // 是否应将语法突出显示复制到剪贴板中 即 当你复制到word中是否保持文字高亮颜色
                cursorBlinking: 'Solid', // 光标动画样式
                cursorSmoothCaretAnimation: true, // 是否启用光标平滑插入动画  当你在快速输入文字的时候 光标是直接平滑的移动还是直接"闪现"到当前文字所处位置
                cursorStyle: 'UnderlineThin', // "Block"|"BlockOutline"|"Line"|"LineThin"|"Underline"|"UnderlineThin" 光标样式
                cursorSurroundingLines: 0, // 光标环绕行数 当文字输入超过屏幕时 可以看见右侧滚动条中光标所处位置是在滚动条中间还是顶部还是底部 即光标环绕行数 环绕行数越大 光标在滚动条中位置越居中
                cursorSurroundingLinesStyle: 'all', // "default" | "all" 光标环绕样式
                cursorWidth: 2, // <=25 光标宽度
                minimap: {
                    enabled: true // 是否启用预览图
                }, // 预览图设置
                folding: true, // 是否启用代码折叠
                links: true, // 是否点击链接
                overviewRulerBorder: false, // 是否应围绕概览标尺绘制边框
                renderLineHighlight: 'gutter', // 当前行突出显示方式
                roundedSelection: false, // 选区是否有圆角
                scrollBeyondLastLine: false, // 设置编辑器是否可以滚动到最后一行之后
                readOnly: false, // 是否为只读模式
                theme: 'vs-dark'// vs, hc-black, or vs-dark
            });
            /*
            const newModel = monaco.editor.createModel(
                `alert('hello');\nalert('hello');\nalert('hello');\nalert('hello');\nalert('hello')`,
                "javascript"
            );
            editor.setModel(newModel);
*/
setTimeout((function(){
var d = editor.getModel().getValue();
console.log(d);
}),2000);
        });
 
    </script>
</body>
</html>

https://juejin.cn/post/6984683777343619102

分类 JavaScript技术 下的文章