h5前端音量调整

最新推荐文章于 2023-02-14 11:27:45 发布

Irene1991

最新推荐文章于 2023-02-14 11:27:45 发布

阅读量8.2k

点赞数 1

分类专栏：前端开发文章标签： input[type=number] input[type=range]

原创文章如需转载请注明地址。

本文链接：https://blog.csdn.net/irene1991/article/details/79694170

版权

前端开发专栏收录该内容

54 篇文章 1 订阅

订阅专栏

使用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);
}