使用bootstrap样式,通过调整滑竿,音量大小显示在数字输入框,同时也可以调整输入框,滑杆同步显示。js使用oninput事件,页面用到了H5中表单元素input的两个新属性,type=range和type=number,type=number在谷歌浏览器中会自带数字加减控件按钮。
页面效果
html
<form class="form-horizontal"> <div class="form-group btnDiv"> <label class="col-lg-3 control-label">讲话音量:</label> <div class="col-lg-3"><input type="number" min="1" max="99" class="form-control" name="speakSound" value="10" oninput="change('speakSound')"></div> <div class="col-lg-6"><input type="range" class="form-control" min="1" max="99" step="1" value="10" oninput="changeSound('speakSound')" id="speakSound"></div> </div> <div class="form-group btnDiv"> <label class="col-lg-3 control-label">收听音量:</label> <div class="col-lg-3"><input type="number" min="1" max="99" class="form-control" value="10" name="listenSound" oninput="change('listenSound')"></div> <div class="col-lg-6"> <input type="range" class="form-control" min="1" max="99" step="1" value="10" oninput="changeSound('listenSound')" id="listenSound"> </div> </div> <div class="form-group btnDiv"> <label class="col-lg-3 control-label">推送音量:</label> <div class="col-lg-3"><input type="number" min="1" max="99" class="form-control" name="sendSound" value="10" oninput="change('sendSound')"></div> <div class="col-lg-6"> <input type="range" class="form-control" min="1" max="99" step="1" value="10" oninput="changeSound('sendSound')" id="sendSound"> </div> </div> </form>
css
.btnDiv { display:inline-block; }
js
//用户调整讲话的音量 滑杆 function changeSound(elem) { var sound = $("#" + elem).val(); $("#" + elem).parent("div").prev("div").children("input").val(sound); } //用户调整讲话的音量 输入框 function change(elem) { var sound = $("input[name=" + elem + "]").val(); $("#" + elem).val(sound); }