需要使滑块工作
Need to make a slider working
本文关键字：工作 更新时间：2023-09-26
大家好，我需要你们的帮助，伙计们。我正在使用js的这段代码来使它工作。
但我不想在里面添加一个外部js…
"use strict";
var $ = window.jQuery;
/*
var BEDROOM_RATES = {
b1 : 119,
b2 : 139,
b3 : 159,
b4 : 189,
b5 : 219,
b6 : 249
};
*/
var BEDROOM_RATES = {
b1 : 99,
b2 : 119,
b3 : 139,
b4 : 169,
b5 : 189,
b6 : 229
};
var PER_BATHROOM = 20;
$(window).ready(function() {
updatePrice();
$('input[type=radio]').on('change', updatePrice);
$('#ui-slider1, #ui-slider2').on('slidechange', updatePrice);
}); // doc ready
function updatePrice() {
var perc_off = 0.0,
bedrooms = $('#ui-slider1').slider('option', 'value'),
bathrooms = $('#ui-slider2').slider('option', 'value'),
freq_id = $('input[type=radio]:checked').attr('id'),
total_price = 0;
total_price = BEDROOM_RATES['b'+bedrooms];
total_price += bathrooms * PER_BATHROOM;
if (freq_id == 'r1') {
// one time
perc_off = 0;
}
else if (freq_id == 'r2') {
// weekly 20% off
perc_off = .20;
}
else if (freq_id == 'r3') {
// bi-weekly 15% off
perc_off = .15;
}
else if ((freq_id == 'r4') || (freq_id == 'r5')) {
// every 3 or 4 weeks, 10% off
perc_off = .1;
}
// subtract frequency discount
total_price *= (1-perc_off);
// set total price on button
$("#total-price").html(parseInt(total_price));
}
$(document).on('change', '#ui-slider__amount1', function(e) {
console.log($(this).val());
});
$(document).on('submit', '#home-form', function(e) {
// e.preventDefault();
var $_form = $(this);
var $_service_id = $('#service_id');
var bedrooms = $('#ui-slider__amount1').val();
var bathrooms = $('#ui-slider__amount2').val();
$('#input-bedrooms').val(bedrooms);
$('#input-bathrooms').val(bathrooms);
$('#pricing_parameter_qty').val(bathrooms);
if (bedrooms == 1) {
$_service_id.val(4);
}
else if (bedrooms == 2) {
$_service_id.val(6);
}
else if (bedrooms == 3) {
$_service_id.val(2);
}
else if (bedrooms == 4) {
$_service_id.val(1);
}
else if (bedrooms == 5) {
$_service_id.val(3);
}
else if (bedrooms == 6) {
$_service_id.val(7);
}
else {
$_service_id.val(4);
}
});
This is external java scriptCheck demo working on
http://getondesk.com/demo/zenclean/
Its a front slider<form id="home-form" action="guestbook.php" method="get">
<input id="input-bedrooms" name="bedrooms" value="1" type="hidden">
<input id="input-bathrooms" name="bathrooms" value="1" type="hidden">
<div class="flag flag--small mb pb--">
<div class="flag__img">
<p class="slider-result-wrap">Bedrooms: <input value="1" id="ui-slider__amount1" class="slider-result" type="text"></p>
<input id="service_id" name="service_id" value="4" type="hidden">
</div>
<div class="flag__body">
<div class="ui-slider-wrap">
<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="ui-slider1" data-max="6"><div style="width: 0%;" class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"></div><span style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span></div>
</div>
</div>
</div>
<div class="flag flag--small mb">
<div class="flag__img">
<p class="slider-result-wrap">Bathrooms: <input value="1" id="ui-slider__amount2" class="slider-result" type="text"></p>
<input name="pricing_parameters[pricing_parameter_id]" value="1" type="hidden">
<input id="pricing_parameter_qty" name="pricing_parameters[quantity]" value="1" type="hidden">
</div>
<div class="flag__body">
<div class="ui-slider-wrap">
<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="ui-slider2" data-max="6"><div style="width: 0%;" class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"></div><span style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span></div>
</div>
</div>
</div>
<div class="layout layout--top layout--small">
<div class="layout__item large-and-up-1/4 1/2">
<div class="radio_wrap">
<input id="r1" name="frequency_id" value="10" class="styled-radiobutton--text" type="radio">
<label for="r1" class="radio"><div class="verticalize">1 time service</div></label>
<p></p>
</div>
</div>
<div class="layout__item large-and-up-1/4 1/2">
<div class="radio_wrap">
<input id="r2" name="frequency_id" value="20" class="styled-radiobutton--text" type="radio">
<label for="r2" class="radio"><div class="verticalize">Every week</div></label>
<p>20% Off</p>
</div>
</div>
<div class="layout__item large-and-up-1/4 1/2">
<div class="radio_wrap">
<input id="r3" name="frequency_id" value="30" class="styled-radiobutton--text perc" checked="checked" type="radio">
<label for="r3" class="radio"><div class="verticalize">Every 2 weeks <span>(Most popular)</span></div></label>
<p>15% Off</p>
</div>
</div>
<!--
<div class="layout__item large-and-up-1/4 1/2">
<div class="radio_wrap">
<input type="radio" id="r4" name="frequency_id" value="20" class="styled-radiobutton--text" />
<label for="r4" class='radio'><div class="verticalize">Every 3 weeks</div></label>
<p>10% Off</p>
</div>
</div>
-->
<div class="layout__item large-and-up-1/4 1/2">
<div class="radio_wrap">
<input id="r5" name="frequency_id" value="40" class="styled-radiobutton--text" type="radio">
<label for="r5" class="radio"><div class="verticalize">Every 4 weeks</div></label>
<p>10% Off</p>
</div>
</div>
</div>
<div class="text-center pt">
<button id="book-appt" type="submit" class="btn btn--primary btn--large">BOOK NOW $<span id="total-price">101</span>/clean</button>
</div>
</form>我不想在没有外部js的情况下使用外部js文件，我需要让它以数据类型运行。
朋友们，请帮帮我。
我制作了一个：Plz喜欢它，它花了我生命中的30分钟xD。电笔。查看全屏模式：
var room = document.getElementById("bedNumber").getContext("2d");
var stay = document.getElementById("stayNumber").getContext("2d");
room.beginPath();
room.fillStyle = "red";
room.fillRect(20, 0, 30, 10);
stay.beginPath();
stay.fillStyle = "red";
stay.fillRect(20, 0, 30, 10);
var RoomNumber = 0;
var StayNumber = 0;
var Lux = 0;
function chose(context, event) {
var X = event.clientX - 80;
if (context == "room") {
room.beginPath();
room.fillStyle = "red";
room.clearRect(0, 0, 1000, 50);
room.fillRect(X, 0, 30, 10);
RoomNumber = X / 2;
} else {
stay.beginPath();
stay.fillStyle = "red";
stay.clearRect(0, 0, 1000, 50);
stay.fillRect(X, 0, 30, 10);
StayNumber = X;
}
Price();
}
function addLuxury(lux) {
Lux = lux * 50;
Price();
}
function Price() {
var Total = RoomNumber + StayNumber + Lux;
document.getElementById("total").innerHTML = "BUY ROOM(S) FOR " + Total + "$";
}#slider {
background-color: rgba(0, 0, 0, 0.3);
width: 600px;
height: 400px;
}
h1 {
color: white;
text-align: center;
}
u {
color: white;
}
canvas {
border: 2px solid black;
margin-left: 50px;
background-color: white;
}
button {
background-color: #0099ff;
border-radius: 25px;
margin: 8px;
}
#total {
background-color: #6666ff;
border-radius: 25px;
text-align: center;
}<body>
<div id="slider">
<u><h1>Hotel Rooms For Good Price</h1></u>
<br/>ROOMS :
<canvas id="bedNumber" width="500" height="10" onclick="chose('room', event)"></canvas>
<br/>
<br/>STAY :
<canvas id="stayNumber" width="500" height="10" onclick="chose('stay', event)"></canvas>
<br/>
<u><h3>Luxury</h3></u>
<button onclick="addLuxury(0)">LUXURARY : BAD
<br/>+0$ per/D</button>
<button onclick="addLuxury(1)">LUXURARY : OK
<br/>+75$ per/D</button>
<button onclick="addLuxury(2)">LUXURARY : WOW
<br/>+150$ per/D</button>
<button onclick="addLuxury(3)">LUXURARY : BEST
<br/>+215$ per/D</button>
<br/>
<br/>
<br/>
<button id="total">BUY ROOM(S) FOR 0$</button>
</div>
</body>相关文章：
- Javascript:selenium Web驱动程序isDisplayed(）不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours(）工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示，而是在JS Fiddle上工作
- 正在尝试使用if和else添加类，但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery）
- JS可以在Chrome中工作，但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- javascript扫雷器floodfill算法不能正常工作
