Range调背景色
Paste_Image.png
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
// 当页面准备完毕的时候
$(document).ready(function(e) {
$('input').change(function(e) {
var red = $('#red').val();
var green = $('#green').val();
var blue = $('#blue').val();
var value = $(this).val(); //当前修改的值
$(this).next().html(value); // 将值赋给当前修改元素后面的span
$('body').css('background-color','rgb('+red+','+green+','+blue+')'); 修改body背景色
});
});
</script>
JQuery的语法其实并不难，但是方法其实还挺多，还是一个熟练度的问题。
完整代码
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<mata http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
// 当页面准备完毕的时候
$(document).ready(function(e) {
$('input').change(function(e) {
var red = $('#red').val();
var green = $('#green').val();
var blue = $('#blue').val();
var value = $(this).val(); //当前修改的值
$(this).next().html(value); // 将值赋给当前修改元素后面的span
$('body').css('background-color','rgb('+red+','+green+','+blue+')');
});
});
</script>
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
red: <input type="range" name="" id="red" min="0" max="255" value="255"><span>255</span><br>
green: <input type="range" name="" id="green" min="0" max="255" value="255"><span>255</span><br>
blue: <input type="range" name="" id="blue" min="0" max="255" value="255"><span>255</span><br>
</body>
<!-- <body style="padding:50px;background-color:#ccc">
<div class="container" style="padding:30px;background-color:#fff;"> -->
<!-- </div>
</body> -->
</html>
<!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
<!-- <script src="bootstrap/js/bootstrap.min.js"></script> -->
网友评论