0
我在本地機器上使用HTML，CSS和JavaScript在本地創建了一個小應用程序。我正在使用插件在網站上運行JavaScript。我的小應用程序從下拉列表中加載不同的圖片，並使用SendMail JavaScript函數。我如何將這個頁面添加爲我的WordPress頁面之一？我使用了一個BlankSlate插件來清理我的一個頁面，並且每當我將代碼粘貼到頁面時，它都會被打亂並工作。它加載我的下拉列表和一些標題，但圖片消失，背景不存在。我是使用WordPress的新手，我想將這個小應用程序添加到我的網站。任何幫助將是偉大的或建議，以及如何複製它。 （對不起，凌亂的，無組織的代碼。不過學習和實踐，但是這是我想變成一個頁面）將HTML網頁應用程序添加到WordPress
<html lang="en"><head>
<meta charset="utf-8">
<meta name="description" content=" A page for exploring html documents">
<title>BuildIt-AR App</title>
<head>
<link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
</head>
<style>
.body {max-width:1920px; margin:0 auto;}
.centered {max-width:720px; margin:0 auto;}
.floatLeft {
float:left;}
select {
display:block; clear:both;
}
.myBox{
clear:both;
max-width: 375px;
max-height: 225px;
padding-top:275px;
}
.textlines {
padding-top:350px;
}
body{
background-image: url("https://www.xmple.com/wallpaper/grey-gradient-linear-1920x1080-c2-708090-dcdcdc-a-285-f-14.svg");
background-repeat: repeat-x;
border: 5px inset lightgrey;
}
font{
font-family: 'Rock Salt', cursive;
position: fixed;
font-size: 350%;
top: 20%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
letter-spacing: 3px;
text-shadow: 2.2px 1.5px grey;
}
select{
}
</style>
<script type="application/javascript">
var pictureList1 = [
"http://i66.tinypic.com/xds135.png",
"http://i68.tinypic.com/28cdhxh.png",
"http://i66.tinypic.com/169s4mc.png",
];
function change_image(id) {
var idx = document.getElementById('picDD').value - 1; // javascript is zero-indexed
document.getElementById('pic').src = pictureList1[idx];
y = document.getElementById("picDD");
//x.value = y.options[y.selectedIndex].text;
document.getElementById("stock").value = stock[y.selectedIndex];
}
var pictureList2 = [
"http://i65.tinypic.com/2wmqefs.png",
"http://i63.tinypic.com/s4za11.png",
"http://i66.tinypic.com/6e3ibq.png",
];
function change_image2(id) {
var idx = document.getElementById('picDD2').value - 1; // javascript is zero-indexed
document.getElementById('pic2').src = pictureList2[idx];
y = document.getElementById("picDD2");
//x.value = y.options[y.selectedIndex].text;
document.getElementById("body").value = body[y.selectedIndex];
}
var pictureList3 = [
"http://i65.tinypic.com/2n9dslt.png",
" http://i65.tinypic.com/289h35y.png",
"http://i64.tinypic.com/vxnpzd.png",
];
function change_image3(id) {
var idx = document.getElementById('picDD3').value - 1; // javascript is zero-indexed
document.getElementById('pic3').src = pictureList3[idx];
y = document.getElementById("picDD3");
//x.value = y.options[y.selectedIndex].text;
document.getElementById("barrel").value = barrel[y.selectedIndex];
}
var barrel = new Array();
var body = new Array();
var stock = new Array();
barrel[0] = "Assault Barrel $89.95";
body[0] = "BlackOut Body $231.95";
stock[0] = "Slide Stock $78.95";
barrel[1] = "Sniper Barrel $395.95";
body[1] = "SlideFire Body $278.95";
stock[1] = "Fold Stock $178.95";
barrel[2] = "Tactical Barrel $278.95";
body[2] = "Green Body $134.95";
stock[2] = "Steady Stock $78.95";
barrel[3] = 4;
body[3] = "asmith";
stock[3] = "Andy Smith";
// function change_image3() {
//x = document.getElementById("users");
//
function sendMail() {
var link = "mailto:[email protected]"
+ "[email protected]"
+ "&subject=" + escape("BuildIt-AR Order Form")
+ "&body=" + escape(document.getElementById('name').value + "\n" + document.getElementById('barrel').value + "\n" + document.getElementById('body').value + "\n" + document.getElementById('stock').value);
window.location.href = link;
}
</script>
</head>
<body>
<div class="centered">
<div class="floatLeft">
<img id="pic" src="http://i66.tinypic.com/xds135.png" class="myBox">
<select id="picDD" onchange="change_image();">
<option value="1" selected="">Stock #1</option>
<option value="2">Stock #2</option>
<option value="3">Stock #3</option>
</select>
</div></div>
<div class="floatLeft">
<img id="pic2" src="http://i65.tinypic.com/2wmqefs.png" class="myBox">
<select id="picDD2" onchange="change_image2();">
<option value="1" selected="">Body #1</option>
<option value="2">Body #2</option>
<option value="3">Body #3</option>
</select>
</div>
<div class="floatLeft">
<img id="pic3" src="http://i64.tinypic.com/vxnpzd.png" class="myBox">
<select id="picDD3" onchange="change_image3();">
<option value="1" selected="">Barrel #1</option>
<option value="2">Barrel #2</option>
<option value="3">Barrel #3</option>
</select>
</div>
<div class="textlines">
<input type="text" placeholder="<Name>" id="name">
<p>Barrel <input type="text" id="barrel" name="id" ></p>
<p>Body <input type="text" id="body" name="username" ></p>
<p>Stock <input type="text" id="stock" name="full_name" ></p>
<font size="10">BuildIt-AR</font>
<button onclick="sendMail(); return false">Send</button>
</body></html>
你可能想創建整個事情簡碼。但要確保所有的js都已正確入隊。 – Difster
提供您的代碼 – Mindless
已添加過帳後的代碼 – bricew25