我有我的HTML网页和一个移动应用程序。
在移动应用程序中,我有三个按钮,分别是“开始”,“暂停”和“停止”,我的网站上也有这三个按钮(在我的网站上,这三个按钮已经具有动作)。
我想要做的是,如果我单击手机上的按钮,它将单击网页上相同的指定按钮。
Mi的最初计划是,从我的移动应用程序中,我通过邮寄发送到网站文件中的php文件中。然后从该php文件中向JavaScript文件发送一个简单的变量,该JavaScript文件将读取该变量是什么变量,并根据该变量执行我网页中相应按钮的点击。
我在网站上使用的脚本位于HTML代码中。
网站:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/test"></script>
<title> Spelling Bee </title>
</head>
<body>
<header>
<h1> Spelling Bee </h1>
</header>
<section>
<div id="textbox">
<h2> "Word" </h2>
</div>
<div>
<p> Choose the difficulty: </p>
<select id="difficulty">
<option value="0"></option>
<option value = "1"> Easy </option>
<option value = "2"> Medium </option>
<option value = "3"> Hard </option>
</select>
<div id="timer"></div>
<button id="start"> Start! </button>
<button id="next"> Next </button>
<button id="stop"> Stop </button>
<script>
//1000 = 1 sec
var start= document.getElementById("start");
var difficulty = document.getElementById("difficulty")
var next = document.getElementById("next");
var stop = document.getElementById("stop");
var timer;
document.getElementById("timer").innerHTML = "-";
document.getElementById("start").disabled = true;
document.getElementById("next").disabled = true;
document.getElementById("stop").disabled = true;
start.addEventListener("click",functionStart);
var seconds,stop,counterStarted = false,counter;
var select_difficulty= document.getElementById('difficulty');
select_difficulty.onchange = function select_stop_time() {
var selectedValue = select_difficulty.options[select_difficulty.selectedIndex].value;
if (selectedValue == 1 ) {
document.getElementById("start").disabled = false;
stop = 10;//10
}
else if (selectedValue == 2 ) {
document.getElementById("start").disabled = false;
stop = 15;//15
}
else if (selectedValue == 3 ){
document.getElementById("start").disabled = false;
stop = 20;//20
}
else {
document.getElementById("start").disabled = true;
document.getElementById("next").disabled = true;
document.getElementById("stop").disabled = true;
stop = 0;//0
}
}
function functionStart() {
seconds = 1;
document.getElementById('difficulty').disabled = true;
document.getElementById("start").disabled = true;
document.getElementById("next").disabled = false;
document.getElementById("stop").disabled = false;
if(counterStarted === false){
counterStarted = true;
counter = setInterval(function(){
if(seconds <= stop){
document.getElementById("timer").innerHTML = seconds;
seconds++;
}
else{
seconds = 1;
}
},1000)
}
}
stop.addEventListener("click",functionStop);
function functionStop(){
document.getElementById("timer").setattribute("disabled","disabled");
clearInterval(counter);
counterStarted = false;
document.getElementById('difficulty').disabled = false;
document.getElementById("timer").innerHTML = "-";
document.getElementById("start").disabled = false;
document.getElementById("next").disabled = true;
document.getElementById("stop").disabled = true;
frame();
}
next.addEventListener("click",functionNext);
function functionNext(){
seconds = stop;
}
</script>
</div>
</section>
<footer>
</footer>
</body>
</html>
移动应用程序: -HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title> Spelling Bee </title>
<!-- grupo CSS -->
<link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.min.css"/>
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css"/>
<link rel="stylesheet" href="css/theme_sb.min.css"/>
<!--grupo JavaScript-->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/acciones.js"></script>
<script src="phonegap.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="principal" style="background-image: url(imagenes/honeycomb.png); text-align:center;">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1> Spelling Bee </h1>
</div>
<div data-role="main" class="ui-content" style="width: 30%; margin-left: 32%; margin-top: 45%;">
<div id="buttons">
<input type="button" class="ui-btn" id="button1" value="Start!">
<input type="button" class="ui-btn" id="button2" value="Next">
<input type="button" class="ui-btn" id="button3" value="Stop!">
</div>
</div>
<div data-role="footer" align="center" data-theme="a" data-position="fixed">
<h4> Spelling Bee </h4>
<img src="imagenes/bee.png" width="60">
</div>
</div>
</body>
</html>
-JavaScript
// JavaScript Document
$(document).ready(function(e) {
$('#button1').on('click',function(){
alert("1");
});//1
$('#button2').on('click',function(){
alert("2");
});//2
$('#button3').on('click',function(){
alert("3");
});//3
}); //ready
我放了警报进行测试。