<!DOCTYPE html>
<html>
<head>
<meta content="text/html"; charset="UTF-8">
<title>Room</title>
<link rel="shortcut icon" href="images/CD.ico" type="html/x-icon"> <!--Иконка-->
<link href="html/css/style.css" rel="stylesheet">
<script src="html/java/jquery-3.0.0.min.js" type="text/javascript"></script>
<script async src="html/java/script.js" type="text/javascript" > </script>
<script></script>
</head>
<body>
<div class="block1">
<p> Верхний левый угол:
<input type="range" id="rtl" min="0" max="100" value="0" oninput="fun1()" >
<input type="text" id="ttl" value="0">
</p>
<p> Верхний правый угол:
<input type="range" id="rtr" min="0" max="100" value="0" oninput="fun1()" >
<input type="text" id="ttr" value="0">
</p>
<p> Нижний правый угол:
<input type="range" id="rbr" min="0" max="100" value="0" oninput="fun1()" >
<input type="text" id="tbr" value="0">
</p>
<p> Нижний левый угол:
<input type="range" id="rbl" min="0" max="100" value="0" oninput="fun1()">
<input type="text" id="tbl" value="0">
</p>
</div>
<div id="block"></div>
</body>
</html>jQuery('document').ready(function(){
function fun1() {
var rtl = document.getElementById('rtl');
var rtr = document.getElementById('rtr');
var rbr = document.getElementById('rbr');
var rbl = document.getElementById('rbl');
var ttl = document.getElementById('ttl');
var ttr = document.getElementById('ttr');
var tbr = document.getElementById('tbr');
var tbl = document.getElementById('tbl');
var block = document.getElementById('block');
ttl.value = rtl.value;
ttr.value = rtr.value;
tbr.value = rbr.value;
tbl.value = rbl.value;
block.style.borderRadius = rtl.value + "px " + rtr.value + "px " + rbr.value + "px " + rbl.value + "px ";
}
});#block {
width: 200px;
height: 100px;
background: red;$('input').on('change', function() {
fun1();
});
// Или так
$('input').on('change', fun1);// Так будет быстрее и проще )
$(function(){
$('input').on('change', fun1);
function fun1() {
var rtl = $('#rtl').val();
var rtr = $('#rtr').val();
var rbr = $('#rbr').val();
var rbl = $('#rbl').val();
var ttl = $('#ttl');
var ttr = $('#ttr');
var tbr = $('#tbr');
var tbl = $('#tbl');
var block = $('#block');
ttl.val(rtl);
ttr.val(rtr);
tbr.val(rbr);
tbl.val(rbl);
block.css({
'border-radius' : rtl + 'px ' + rtr + 'px ' + rbr + 'px ' + rbl + 'px'
});
}
});