jquery+css 实现即时变化颜色主题，通过input输入颜色值进行改变
实现效果需要自行导入jquery.js
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/JavaScript" src="js/jquery.js"></script>
</head>
<style>
div section{
width: 30px;
height: 30px;
margin: 10px;
display: inline-block;
}
div section{
background-color: black;
border-radius: 50%;
}
div section:hover{
cursor:pointer;
}
div input,
div button{
position: absolute;
margin-top: 10px;
height: 30px;
width: 230px;
}
div button{
width: 50px;
margin-left: 240px;
cursor:pointer;
}
</style>
<body>
<div>
<section onclick="instantClick()" ></section>
<input type="text" oninput="instantChange()" onpropertychange="instantChange()" placeholder="请您输入十六进制颜色码，如#123123。" maxlength="7">
<button onclick="instantClick()">确认</button>
</div>
<center>
<h2 >颜色主题jquery变换</h2>
<form action="" >
<span>input：</span><input type="text" required><br><br>
<button >开始计算</button>
</form>
<span ></span>
</center>
<script>
//即时换色
// 设置需要换色的元素及其样式（与上一篇相同）
function change(colo){
$("#calc").css("background-color", colo);
$("h2, small, span").css("color", colo);
$("input").css("color", colo);
$("input[type=text]").focus(function(){$(this).css("outline", "none")});
$("input[type=text]").focus(function(){$(this).css("border", "2px solid " + colo)});
$("input[type=text]").blur(function(){$(this).css("border", "1px solid gray")});
}
// 设置input输入的颜色值
var colorC;
function instantChange(){
colorC = $("#insInput").val();
// 改变section的背景色
$("#insC").css("background-color", colorC);
}
// 调用页面换色方法
function instantClick(){
change(colorC);
}
</script>
</body>
</html>如有错误，请您指正！
- 上一篇 »css样式之background详解，格子效果
- 下一篇 »css颜色模式hsla和rgba
