如何使用JavaScript在新窗口中插入滚动条？_Javascript_Html_Css

如何使用JavaScript在新窗口中插入滚动条？

javascript html css

如何使用JavaScript在新窗口中插入滚动条？,javascript,html,css,Javascript,Html,Css,我有一个程序，可以计算如何使用4个数字得到24： <!DOCTYPE html> <link rel="stylesheet" href="style.css"> <title>Calculate 24 Solutions</title> <script src="clock.js"></script> The game 24 (aka. Combine 4) gives you 4 numbers, and you hav

我有一个程序，可以计算如何使用4个数字得到24：

<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<title>Calculate 24 Solutions</title>
<script src="clock.js"></script>
The game 24 (aka. Combine 4) gives you 4 numbers, and you have to do operations using all four numbers to make 24. Some of the questions are quite tricky! If you need help getting the solution, click the button below and follow the directions! It will give you a list of all the solutions. One operation you may not be familliar with is modulo. It takes 2 numbers, divides to first number by the second number, and returns the remainder.<br><br>
+ is addition<br>
- is subtraction<br>
* is multiplication<br>
/ is division<br>
^ is exponents<br>
% is modulo<br><br>
<script>
var solutions = []; var power; var mod; var powStr; var modStr; var answerStr;
function doop(var1, var2, op) {
    if (op == '+') {
        return Number(var1) + Number(var2);
    } else if (op == '-') {
        return Number(var1) - Number(var2);
    } else if (op == '*') {
        return Number(var1) * Number(var2);
    } else if (op == '/') {
        return Number(var1) / Number(var2);
    } else if (op == '%') {
        return Number(var1) % Number(var2);
    } else if (op == '^') {
        return Math.pow(Number(var1), Number(var2));
    } else {
        alert("Invalid number or operation! Cannot doop() these parameters!");
    }
}
function getNumbers() {
    solutions = [];
    var invalid = false;
    alert("Let's start calculating!");
    power = prompt("Include exponents (the power operation)?");
    mod = prompt("Include the modulo operation?");
    if (power.toLowerCase().substring(0, 1) == "y") {
        power = "yes";
    } else if (power.toLowerCase().substring(0, 1) == "n") {
        power = "no";
    } if (mod.toLowerCase().substring(0, 1) == "y") {
        mod = "yes";
    } else if (mod.toLowerCase().substring(0, 1) == "n") {
        mod = "no";
    }
    var a = prompt("What is number 1?");
    var b = prompt("What is number 2?");
    var c = prompt("What is number 3?");
    var d = prompt("What is number 4?");
    if (isNaN(a) || a > 13 || a < 0 || a == '' || a === null) {
        alert("The first number is invalid!");
        invalid = true;
    }
    if (isNaN(b) || b > 13 || b < 0 || b == '' || b === null) {
        alert("The second number is invalid!");
        invalid = true;
    }
    if (isNaN(c) || c > 13 || c < 0 || c == '' || c === null) {
        alert("The third number is invalid!");
        invalid = true;
    }
    if (isNaN(d) || d > 13 || d < 0 || d == '' || d === null) {
        alert("The fourth number is invalid!");
        invalid = true;
    }
    if (power.toLowerCase() != "yes" && power.toLowerCase() != "no") {
        alert("The exponent prompt response is invalid!");
        invalid = true;
    }
    if (mod.toLowerCase() != "yes" && mod.toLowerCase() != "no") {
        alert("The modulo prompt response is invalid!");
        invalid = true;
    }
    while (invalid === true) {
        power = prompt("Include exponents (the power operation)?");
        mod = prompt("Include the modulo operation?");
        a = prompt("What is number 1?");
        b = prompt("What is number 2?");
        c = prompt("What is number 3?");
        d = prompt("What is number 4?");
        invalid = false;
        if (isNaN(a) || a > 13 || a < 0 || a == '' || a === null) {
            alert("The first number is invalid!");
            invalid = true;
        }
        if (isNaN(b) || b > 13 || b < 0 || b == '' || b === null) {
            alert("The second number is invalid!");
            invalid = true;
        }
        if (isNaN(c) || c > 13 || c < 0 || c == '' || c === null) {
            alert("The third number is invalid!");
            invalid = true;
        }
        if (isNaN(d) || d > 13 || d < 0 || d == '' || d === null) {
            alert("The fourth number is invalid!");
            invalid = true;
        }
        if (power.toLowerCase() != "yes" && power.toLowerCase() != "no") {
            alert("The exponent prompt response is invalid!");
            invalid = true;
        }
        if (mod.toLowerCase() != "yes" && mod.toLowerCase() != "no") {
            alert("The modulo prompt response is invalid!");
            invalid = true;
        }
        if (power.toLowerCase().substring(0, 1) == "y") {
            power = "yes";
        } else if (power.toLowerCase().substring(0, 1) == "n") {
            power = "no";
        } if (mod.toLowerCase().substring(0, 1) == "y") {
            mod = "yes";
        } else if (mod.toLowerCase().substring(0, 1) == "n") {
            mod = "no";
        }
    }
    return [a, b, c, d];
}
function calculate(a, b, c, d) {
    var op1 = ['+', '-', '*', '/'];
    var op2 = ['+', '-', '*', '/'];
    var op3 = ['+', '-', '*', '/'];
    if (mod.toLowerCase() == "yes") {
        op1.push('%');
        op2.push('%');
        op3.push('%');
    }
    if (power.toLowerCase() == "yes") {
        op1.push('^');
        op2.push('^');
        op3.push('^');
    }
    var i1; var i2; var i3;
    for (i1 = 0; i1 < op1.length; i1++) {
        for (i2 = 0; i2 < op2.length; i2++) {
            for (i3 = 0; i3 < op3.length; i3++) {
                if (doop(doop(doop(a, b, op1[i1]), c, op2[i2]), d, op3[i3]) == 24) {
                    solutions.push('((' + a + op1[i1] + b + ')' + op2[i2] + c + ')' + op3[i3] + d + ' = 24');
                }
                if (doop(doop(a, doop(b, c, op1[i1]), op2[i2]), d, op3[i3]) == 24) {
                    solutions.push('(' + a + op2[i2] + '(' + b + op1[i1] + c + '))' + op3[i3] + d + ' = 24');
                }
                if (doop(doop(a, b, op1[i1]), doop(c, d, op2[i2]), op3[i3]) == 24) {
                    solutions.push('(' + a + op1[i1] + b + ')' + op3[i3] + '(' + c + op2[i2] + d + ') = 24');
                }
                if (doop(a, doop(doop(b, c, op1[i1]), d, op2[i2]), op3[i3]) == 24) {
                    solutions.push(a + op3[i3] + '((' + b + op1[i1] + c + ')' + op2[i2] + d + ') = 24');
                }
                if (doop(a, doop(b, doop(c, d, op1[i1]), op2[i2]), op3[i3]) == 24) {
                    solutions.push(a + op3[i3] + '(' + b + op2[i2] + '(' + c + op1[i1] + d + ')) = 24');
                }
            }
        }
    }
}
function enumerate() {
    var num = getNumbers();
    var a; var b; var c; var d;
    for (var ai = 0; ai < 4; ai++) {
        a = num[ai];
        for (var bi = 0; bi < 4; bi++) {
            if (bi != ai) {
                b = num[bi];
                for (var ci = 0; ci < 4; ci++) {
                    if (ci != ai && ci != bi) {
                        c = num[ci];
                        for (var di = 0; di < 4; di++) {
                            if (di != ai && di != bi && di != ci) {
                                d = num[di];
                                calculate(a, b, c, d);
                            }
                        }
                    }
                }
            }
        }
    }
    if (power.toLowerCase() == "yes") {
        powStr = "did";
    } else {
        powStr = "did not";
    }
    if (mod.toLowerCase() == "yes") {
        modStr = "did";
    } else {
        modStr = "did not";
    }
    if (solutions.length == 0) {
        answerStr = "Sorry, no solution found.";
    } else {
        answerStr = solutions.length + " solutions found:";
    } 
    var solutionWindow = window.open('','_blank','width=500,height=1000');
    solutionWindow.document.write("<link rel=\"stylesheet\" href=\"style.css\">Your numbers are:<br>\n" + num[0] + ', ' + num[1] + ', ' + num[2] + ', and ' + num[3] + "<br><br>\n" + 'You ' + powStr + ' include exponents.<br>You ' + modStr + ' include modulo.' + '<br><br>\n' + answerStr + '<br>\n');
    solutionWindow.document.write(solutions.join("<br>\n"));
    solutionWindow.document.write("<br><br>\n<a href=\"#\"><button>Back to top</button></a><br>");
    solutionWindow.document.write("<br>\n<button onclick=\"javascript: self.close()\">Close Window</button>");
    solutionWindow.focus();
}
</script>
<button onclick="javascript: enumerate()">Calculate Solution</button>

然而，在IE中，当它打开新窗口时，没有滚动条，所以有时我看不到所有的解决方案。不过，它在Google Chrome中运行良好。

试试：

var solutionWindow = window.open('','_blank','scrollbars=1,width=500,height=1000');

如果您想使用

javascript

，您可以按照

否则，如果要使用CSS：

html,body {
    overflow:scroll; // I'm not sure whether your results always need a scroll-bar to see it, if yes use `auto` 
}

要将此css插入弹出窗口，请执行以下操作：

solutionWindow.document.write("<style>html,body { overflow:scroll; }</style>);

solutionWindow.document.write（“html，body{overflow:scroll；}”）；

或者只是将它添加到你的

style.css

文件中，这是相当多的代码。你能创建一个吗？我的计算机上有apache，我使用的是IE 9，它不工作，我无法创建JSFIDLE，因为document.write被禁用，而且警报也不工作。你想要css解决方案吗？我确实在我的style.css中添加了它！你尝试过（调试）吗它！？我添加了“主体”部分，现在它有滚动条，但它不会滚动到页面底部！它只滚动半毫米并停止。更正：半厘米

solutionWindow.document.write("<style>html,body { overflow:scroll; }</style>);