我的 index.php 页面中有一个纸质 slider 。我能够获取纸张 slider 的实时值，并在输入类型=文本中显示其值...形式，文本区域...和div。
我想要的是在另一个 php 页面中回显此 slider 值的实时值。例如:value.php 有什么办法可以做到吗？
我将不胜感激。
这是我的代码:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>paper-input</title>
<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
<link href="https://www.polymer-project.org/0.5/components/paper-slider/paper-slider.html" rel="import">
<link href="https://www.polymer-project.org/0.5/components/font-roboto/roboto.html" rel="import">
<link rel="stylesheet" href="css/foundation.css">
<script src="js/vendor/modernizr.js"></script>
<style shim-shadowdom>
body{
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0;
padding: 24px;
}
paper-slider {
width: 100%;
}
section {
max-width: 1000px;
padding: 20px 0;
background-color: #f0f0f0;
}
section > div {
padding: 14px;
}
.yellow-slider paper-slider::shadow #sliderKnobInner,
.yellow-slider paper-slider::shadow #sliderBar::shadow #activeProgress {
background-color: #f4b400;
}
.green-slider paper-slider::shadow #sliderKnobInner,
.green-slider paper-slider::shadow #sliderKnobInner::before,
.green-slider paper-slider::shadow #sliderBar::shadow #activeProgress {
background-color: #0f9d58;
}
#ratingsLabel {
padding-left: 12px;
color: #a0a0a0;
}
</style>
</head>
<body>
<div id="valueslide"></div>
<form role="form" method="POST">
<textarea id="mytextarea" name="slider">Text to be changed</textarea>
</form>
<table>
<!--tr specifies a new row-->
<tr>
<td>Value</td>
<td><input type=text id='firstNumber' value=''></td>
</tr>
</table>
<template is="auto-binding">
<paper-slider on-immediate-value-change="{{sliderChange}}" min="0" max='100' pin immediateValue="{{sliderValue}}"></paper-slider>
</template>
</body>
<script>
document.querySelector('template').addEventListener('template-bound', function() {
this.sliderChange = function() {
var x=(this.sliderValue);
var n = x.toString();
document.getElementById("valueslide").innerHTML=x;
document.getElementById('mytextarea').innerHTML =x;
document.getElementById('firstNumber').value =n;
};
});
</script>
</html>最佳答案
这里有几个不同的选项。
- AJAX:当更改事件被触发时，您将通过 AJAX 将任何更改发布到您的服务器。您可以将该值存储在数据库或其他一些数据存储中。然后订阅者页面将轮询对该数据存储的更改并检索新值(再次通过 AJAX)。
优点:易于实现
缺点:您会经常打开和关闭连接，并且需要仔细管理响应的顺序。 - Web Sockets:您将向服务器打开一个 Web 套接字并发布更改，订阅者也将打开一个 Web 套接字连接，因此服务器将传递值。
优点:速度非常快，无需密切管理连接
缺点:有限的浏览器支持和 PHP 不适合这项任务(NodeJS 是你的 friend ) - Firebase(其他服务可用):可能理想的解决方案是使用第三个发布/订阅，例如 Firebase完成选项 2 的困难工作，但具有选项 1 的回退。
优点:把困难的事情从你的盘子里拿走，容易实现，速度快
缺点:第三方
关于javascript - 我如何在不同的 php 页面上回显范围 slider 的实时值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30593003/