大家好,我需要你的帮助伙伴。我正在使用这个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 script
Check 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文件,我需要使用数据类型运行它。
请帮助我。朋友。
答案 0 :(得分:0)
我做了一个:Plz喜欢它,我花了30分钟的生命xD。 Code pen。看一看FULL SCREEN MODE:
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 + "$";
}
&#13;
#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;
}
&#13;
<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>
&#13;