- 在提示框中输入数字或名称并单击提交后，我希望输出打印在另一页上而不是警告框或使用 .innerhtml。单击 -> 用户输入他们的姓名或他们的 2 个付款号码时，它会被添加到总数中 -> 结果会打印在带有文本的单独页面上。
function myName() {
var person = prompt("Please enter your first and last name", " ");
if (person != null) {
alert("Hello " + person + " " + "Welcome to World Travels!!!");
}
}
function myPayment() {
var a = Number(prompt("Enter first payment: "));
var b = Number(prompt("Enter second payment: "));
if (a + b != null) {
window.location.href = 'otherPage.html#a:' + a + ';b:' + b;
}
}
function myCheck() {
alert("Program Number NO: 002462\nReservation NO: A987VBS\nConfirmation N0: 786543\nStatus: Excellent and trip on time.\nHave a nice trip.");
}h2 {
background-color:black;
margin:0;
padding:0;
color:white;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
margin-top:15px;
margin-bottom:0;
margin-left:0;
margin-right:0;
padding-left:12px;
padding-right:12px;
padding-top:12px;
padding-bottom:12px;
border-width: 1px;
border-style:solid;
border-color:yellow;
}
.boxed {
color:blue;
background-color:yellow;
margin-right:50px;
margin-left:50px;
margin-top:50px;
margin-bottom:50px;
padding-left:15px;
padding-right:15px;
padding-top:15px;
padding-bottom:15px;
border-style: dashed;
border-color: black;
}
body {
margin:0;
background-color:blue;
}
footer {
font-size:75%;
color:white;
text-align:center;
}
.scroll-left {
height: 50px;
overflow: hidden;
position: relative;
color: white;
}
.scroll-left p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 15s linear infinite;
-webkit-animation: scroll-left 15s linear infinite;
animation: scroll-left 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}
.greytext {
color:gray;
padding-left:5px;
}
.buttons {
text-align:center;
}
.join_button {
background-color:yellow;
}
.payment_button {
background-color:red;
}
.check_button {
background-color:#00FFFF;
}
hr {
color:gray;
}
.blink_me {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0; }
}<!DOCTYPE html>
<html>
<head>
<!--File Information -->
<!--Document Name:Midhtml.txt -->
<!--Author: Andreas Lambadarios -->
<!--Date Created: 10/29/16 -->
<!--Date Updated: 10/29/16 -->
<!-- Description: -->
<!-- ******************************************************************** -->
<html lang="en">
<title>Mid Project</title>
<link rel="stylesheet" type="text/css" href="project3css.css">
<script src="project3js.js"></script>
</head>
<meta charset="utf-8">
<h2 id"top_header">The Best of World Travel Programs</h2>
<div class="scroll-left">
<p>Welcome To Our Best Program and Price!</p>
</div>
<div class="boxed">
This site you will learn about thousands of travel destinations. So many wonderous places await you!!! This site you will learn about thousands of travel destinations. So many wonderous places await you!!! This site you will learn about thousands of travel destinations. So many wonderous places await you!!! This site you will learn about thousands of travel destinations. So many wonderous places await you!!! This site you will learn about thousands of travel destinations. So many wonderous places await you!!! This site you will learn about thousands of travel destinations. So many wonderous places await you!!!
</div>
<div class="scroll-left">
<p>Don't Wait Limited Time Only!</p>
</div>
<div class="blink_me">
<p class="greytext">Select your choice by clicking one of the following buttons:</p>
</div>
<div class="buttons">
<button onclick="myName()" class="join_button" type="button">Join</button>
<button onclick="myPayment()" class="payment_button" type="button">Payment</button>
<button onclick="myCheck()" class="check_button" type="button">Check-In</button>
</div>
<hr>
<footer>
<p>Copyright © Andreas Lambadarios 2016</p>
</footer>
</body>
</html>- 所有 javascript 函数都能正常工作。我主要想要的是将姓名和付款信息打印在单独的页面上。
最佳答案
您是说在输入数据后，用户应该被重定向到显示该数据的页面？
在这种情况下，您需要使用一种方法在这些页面之间传递变量:数据库、cookie、网络存储、查询字符串或 url 片段(这就是我现在想到的)。
让我们以最后一个为例。您可以尝试的是:
function myPayment() {
var a = Number(prompt("Enter first number"));
var b = Number(prompt("Enter second number"));
if (a + b != null) {
window.location.href = 'otherPage.html#a:' + a + ';b:' + b;
}
}
在 otherPage.html 上，您可以包含以下脚本以再次检索这些值:
function getPaymentValues() {
var hashValues = window.location.hash.substring(1).split(';');
var storedValues = {};
for (var i = 0; i < hashValues.length; i++) {
var keyValue = hashValues[i].split(':');
storedValues[keyValue[0]] = keyValue[1];
}
return storedValues;
}
然后您可以再次从对象中获取值，只需使用片段中指定的键，如 storedValues.a 或 storedValues.b。 Here是一个 Plunker 证明了这一点。
请注意，这意味着虽然用户可以在 url 中指定带有键值的键，但这对您来说可能是一个安全问题。我不确定你到底想做什么，但你可能想使用服务器端的东西，由数据库支持。
希望对您有所帮助! :)
关于javascript - 如何在新的空白页上打印提示框输出结果而不是警告框本身？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40333617/