Question

我有一堆按钮，我想通过单击它们来运行各种bash命令。到目前为止，我有fs.mkdir（），但是我想要类似fs.exec（'here any command'）的东西。我将如何去做？

这是我的代码：

JS：

var largediv = document.getElementById('large');
var siblingdiv = document.getElementById('sibling');

var div = 360 / 6;
var radius = 150;

var offsetToChildCenter = 50;

var offsetToParentCenter = parseInt(siblingdiv.offsetWidth / 2); //assumes parent is square
var totalOffset = offsetToParentCenter - offsetToChildCenter;

for (var i = 1; i <= 6; ++i) {
    var childdiv = document.createElement('div');
    childdiv.className = 'small';
    childdiv.style.position = 'absolute';

    var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
    var x = Math.cos((div * i) * (Math.PI / 180)) * radius;

    childdiv.style.top = (y + totalOffset).toString() + "px";
    childdiv.style.left = (x + totalOffset).toString() + "px";

    childdiv.style.width = `${offsetToChildCenter * 2}px`
    childdiv.style.height = `${offsetToChildCenter * 2}px`
    childdiv.innerHTML = "Example Text"

    //parentdiv.appendChild(childdiv);
    siblingdiv.appendChild(childdiv);
}
var fs = require('fs');
largediv.addEventListener('click', function(event) {
    fs.mkdir('/Users/roma/Desktop/testFolder', function(err) {});
})

HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <link rel='stylesheet' href='styles.css' />

</head>

<body>
    <div id="parentdiv">
        <div id="sibling"></div>
        <div id="large"> Example Center Text</div>

    </div>

    <script src="calc.js"></script>

</body>

</html>

CSS：


#parentdiv {
    width: 400px;
    height: 300px;
}

#large {
    position: relative;
    margin-left: 150px;
    margin-top: -150px;
    width: 150px;
    height: 150px;
    border-radius: 150px;
    background-color: white;
    color: red;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    text-align: center;
    display: flex;
    box-shadow: 0px 0px 20px red;
}

#sibling {
    width: 150px;
    height: 150px;
    position: relative;
    margin-top: 150px;
    margin-left: 150px;
}

#large:hover {
    color: white;
    background: red;
    box-shadow: 0px 0px 20px red;
}

#large:active {
    color: white;
    background: red;
    box-shadow: 0px 0px 0px red;
}

.small {
    position: absolute;
    border-radius: 150px;
    background-color: white;
    color: red;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    text-align: center;
    display: flex;
    z-index: 99;
    box-shadow: 0px 0px 20px red;
}

.small:hover {
    background-color: red;
    color: white;
    box-shadow: 0px 0px 20px red;
}

.small:active {
    background-color: red;
    color: white;
    box-shadow: 0px 0px 0px red;
}


/* for centering */

html {
    display: flex;
    height: 100%;
}

body {
    margin: auto
}

我不确定这是否有意义，但我也正在使用电子将其纳入应用程序。

我是js / html / css的新手，任何帮助将不胜感激！

如何通过单击按钮运行bash命令？

0 个答案: