1
최근 웹 페이지를 디자인 했으므로 웹 개발자가 아니므로 여러 위치에서 조각과 비트를 수집하여 좀 더 꿰맬 수있었습니다.버튼은 iphone의 사파리에서 작동하지 않습니다.
이제 페이지는 완전히 설계되었으며 firefox, chrome 및 IE에서 작동합니다.
하지만 Safari에서는 작동하지 않습니다.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="referrer" content="origin">
<script>
var counter = 0;
var limit = 50;
function addInput(divName, arrName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<input type='text' name='" + arrName + "[]' required>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
<style>
html *
{
color: #000 !important;
font-family: Arial !important;
}
.wrapper
{
height: 100%;
width: 100%;
display: flex;
overflow:auto;
}
.window
{
width: 100%;
min-height: 200px;
display: flex;
flex-direction: column-reverse;
float: none;
align-items: center;
justify-content: center;
}
.windowContent
{
}
input[type=text], select {
width: 150%;
padding: 6px 10px;
margin: 4px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 80%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]{
width: 50%;
background-color: #9CAFFF;
color: white;
padding: 6px 5px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 0px;
float: left;
width: 75%;
margin: 5px;
margin-left: 0.5cm;
}
.floating-box {
float: left;
width: 100%;
margin: 5px;
margin-left: 0.5cm;
border: 3px solid #73AD21;
}
</style>
</head>
<body onload="GenerateEmotion()">
<div class="wrapper">
<div class="window">
<div class="windowContent">
<form method="POST" action="http://formspree.io/[email protected]" align="center">
<div id = "dynamicInputHolder">
<div id="dynamicInput_1">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
<div id = "dynamicInputHolder">
<div id="dynamicInput_2">
<div class="floating-box">Sally heard a knock on the door.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_2', 'myInputs_2');">
</div>
<div id = "dynamicInputHolder">
<div id="dynamicInput_3">
<div class="floating-box">Her heartbeat fast, Sally began to walk down the aisle.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_3', 'myInputs_3');">
</div>
<br>
<input type="submit" value="I have completed a story">
</form>
<script>
function GenerateEmotion(){
var emotion = "";
var raw = Math.random();
var final = Math.ceil(raw * 4);
if (final == 1)
document.getElementById("emotion").value = "Happy";
else if (final == 2)
document.getElementById("emotion").value = "Sad";
else if (final == 3)
document.getElementById("emotion").value = "Angry";
else if (final == 4)
document.getElementById("emotion").value = "Surprise";
}
</script>
</div>
</div>
<div class="window">
<div class="windowContent">
<p><font size="6"><b>Emotionalize it!</b></font></p>
<p><font size="3">We are trying to develop computer programs that can understand common emotions, so they can communicate better with human users.</font></p>
<p><font size="5"><b> Rules of the game </b></font></p>
<font size="3">
<p>Imagine you are a narrator. Today, you are narrating a story of John and Sally's wedding.</p>
<p>Your goal is to make your audience experience the emotion written on the left top. </p>
<p>We are helping you to maintain the flow, you just need to connect the dots!</p>
<p>As your story will be fed to a giant computer program, so can you:</p>
<ul>
<li>Please use simple language. Do NOT use compound, complex, or conditional sentences</li>
<li>Please do not use pronouns. Use the name - John instead of 'him'</li>
<li>Please use the past tense and active voice.</li>
<li>Please make sure to include events from the beginning to the end.</li>
<li>You want more characters? If yes, Please use David(male) and Amy(female)</li>
<li>You can use the also include character based actions, e.g. 'A waiter ...'</li>
<li>Your audiance should experience the said emotion</li>
</ul>
</font>
</div>
</div>
</div>
</body>
</html>
특히, 무엇을 작동하지 않습니다 :
제출 '새로운 문장 추가'에
- 버튼 클릭이 어떤 여기 코드입니다 오류 : 아니요, 버튼을 터치 한 후 아무 것도 발생하지 않습니다.
내가 밖으로 찾고 무엇을 : 당신이 개발자들은 사파리에서 작동하지 않는 이유를 알아낼 수있는 웹, 그것은 큰 도움이 될 것입니다 경우
- .
- 해당 부분을 변경하는 방법, 기능은 동일하지만 사파리에서 작동합니다.
- 이미이 질문을하고 있으므로 다른 측면의 질문에 도움이됩니다. 하단의 스크롤바를 수정하는 방법을 알 수 있습니까?
PS_1 : 당신이 복사 붙여 넣기 같은 코드를 생각하지 않는 경우, 조건을 here
PS_2 작업에 : 나는 사파리를 말할 때, 나는 당신을 수행 아이폰
전체 페이지를 질문에 덤프하는 것이 아니라 [mcve]를 만들어야합니다. – Quentin
HTML에 컴퓨터에서 감지 할 수있는 오류가 있습니다. [validator] (https://validator.nu)를 사용하십시오. – Quentin