颜色查看器

最新推荐文章于 2021-05-31 19:01:30 发布

明外

最新推荐文章于 2021-05-31 19:01:30 发布

阅读量1.2k

点赞数

分类专栏：原创 .NET

本文链接：https://blog.csdn.net/xmroom/article/details/11730087

版权

.NET 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

原创

17 篇文章 1 订阅

订阅专栏

在一个文本框中输入颜色值，就可以在页面中显示该颜色值对应的颜色是什么颜色，效果图如下;

新建color.html页面：

源码如下;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript"   src="../js/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" language="javascript">


       function colorRenew() {
            var color_value = $("#txt_color").val();
            $("#color").css("background-color", color_value);
               $("#lb_color").html(color_value);
        }
    </script>


</head>
<body>
<form  >
 <div>
<strong> 颜色：</strong><input  type="text" id="txt_color"  οnchange="return colorRenew();"  οnkeypress="return colorRenew();" />
 <div id="color" style="width:400px; height:400px;    text-align:center; border:#A8B7CC solid 2px;">
 <label  id="lb_color" style=" font-size:40px;   font-weight:bold;"></label>
 <br />
 <br />
 <br />
 <strong>请在文本框中输入颜色名称,然后按空格键</strong>
 </div>


 </div>
</form>


</body>
 
</html>