Как вставить полосы прокрутки в новое окно с помощью JavaScript?

Question

Как вставить полосы прокрутки в новое окно с помощью JavaScript?

0

У меня есть программа, которая вычисляет, как получить 24, используя 4 числа:

<!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 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>

Мой стиль.css:

html {
  background-color: lightYellow;
  overflow: scroll;
}
button {
  height: 50px;
  width: 150px;
  border: none;
  border-radius: 25px;
  color: white;
  background-image: -webkit-linear-gradient(white, lightGreen, green, darkGreen, green, lightGreen, white);
  background-image: -moz-linear-gradient(white, lightGreen, green, darkGreen, green, lightGreen, white);
  background-image: -o-linear-gradient(white, lightGreen, green, darkGreen, green, lightGreen, white);
  background-image: linear-gradient(white, lightGreen, green, darkGreen, green, lightGreen, white);
}
button:focus {
  color: black;
  background-image: -webkit-linear-gradient(darkGreen, green, lightGreen, white, lightGreen, green, darkGreen);
  background-image: -moz-linear-gradient(darkGreen, green, lightGreen, white, lightGreen, green, darkGreen);
  background-image: -o-linear-gradient(darkGreen, green, lightGreen, white, lightGreen, green, darkGreen);
  background-image: linear-gradient(darkGreen, green, lightGreen, white, lightGreen, green, darkGreen);
}
button:hover {
  color: white;
  background-image: -webkit-linear-gradient(white, lightBlue, blue, darkBlue, blue, lightBlue, white);
  background-image: -moz-linear-gradient(white, lightBlue, blue, darkBlue, blue, lightBlue, white);
  background-image: -o-linear-gradient(white, lightBlue, blue, darkBlue, blue, lightBlue, white);
  background-image: linear-gradient(white, lightBlue, blue, darkBlue, blue, lightBlue, white);
}
button:active {
  color: black;
  border: none;
  background-image: -webkit-linear-gradient(darkBlue, blue, lightBlue, white, lightBlue, blue, darkBlue);
  background-image: -moz-linear-gradient(darkBlue, blue, lightBlue, white, lightBlue, blue, darkBlue);
  background-image: -o-linear-gradient(darkBlue, blue, lightBlue, white, lightBlue, blue, darkBlue);
  background-image: linear-gradient(darkBlue, blue, lightBlue, white, lightBlue, blue, darkBlue);
}

Однако в IE, когда он открывает новое окно, нет полос прокрутки, поэтому иногда я не вижу всех решений. Однако он отлично работает в Google Chrome.

Oliver Ni 11 нояб. 2013, в 18:14

Источник

0

Это довольно много кода. Не могли бы вы создать JsFiddle ?
Liam 11 нояб. 2013, в 16:56
0

Какая версия IE?
taz 11 нояб. 2013, в 16:57
0

У меня на компьютере есть apache
Oliver Ni 11 нояб. 2013, в 16:57
0

Я использовал IE 9, и он не работает
Oliver Ni 11 нояб. 2013, в 16:58
0

Я не могу сделать jsFiddle, потому что document.write набран и плюс, оповещение тоже не работает
Oliver Ni 11 нояб. 2013, в 17:01
0

Вы хотите решение CSS?
Adam Azad 11 нояб. 2013, в 17:02
0

Конечно! Я просто хочу полосы прокрутки в новом окне.
Oliver Ni 11 нояб. 2013, в 17:02
0

Видите, вот JSFiddle: jsfiddle.net/y4xfA/1 Это не работает
Oliver Ni 11 нояб. 2013, в 17:05
0

@ Оливер Ты пробовал мое решение?
plalx 11 нояб. 2013, в 17:22
0

Да, есть, но все равно не работает ...?
Oliver Ni 11 нояб. 2013, в 19:05
0

Вот мои редактируемые файлы drive.google.com : drive.google.com/…
Oliver Ni 11 нояб. 2013, в 21:39

Показать ещё 9 комментариев

Теги:

javascript

html

css

2 ответа

Ещё вопросы

Это довольно много кода. Не могли бы вы создать JsFiddle ?
Я использовал IE 9, и он не работает
Я не могу сделать jsFiddle, потому что document.write набран и плюс, оповещение тоже не работает
Конечно! Я просто хочу полосы прокрутки в новом окне.
Видите, вот JSFiddle: jsfiddle.net/y4xfA/1 Это не работает
Да, есть, но все равно не работает ...?
Вот мои редактируемые файлы drive.google.com : drive.google.com/…

plalx · Answer 1 · 2013-11-11T15-55-00.000Z

Попробуйте:

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

Adam Azad · Answer 2 · 2013-11-11T15-22-00.000Z

Если вы хотите использовать javascript, вы можете следовать за ответом plalx

В противном случае, если вы хотите использовать 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>);

или просто добавьте его в свой файл style.css

Я добавил часть «body», и теперь у нее есть полосы прокрутки, но она не прокручивается до конца страницы! Он просто прокручивает полмиллиметра и останавливается.