辨色器

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Color Detector</title>  
<script type="text/javascript">  
    function calc() {  
        var color = document.getElementById("color").value;  
        if(color.length!=7 && color.length!=9) {  
            alert(color.length + "The format of color is not correct!\r\n example: #010203 or #AA010203");  
            return;  
        }  
        var opacity = 1;  
        if(color.length==9) {  
            opacity = "0x" + color.substring(1, 3);  
            opacity = parseInt(opacity)/255;  
            color = '#' + color.substring(3, color.length);  
              
        }  
          
        var boxstyle = document.getElementById('box').style;  
        boxstyle.background=color;  
        boxstyle.opacity =opacity;  
    }  
</script>  
</head>  
<body>  
    <div id="box" style="width: 150px; height: 50px; background: #e6e6e6; opacity:1"></div>  
    <input type="text" id="color" name="color" value="#e6e6e6" /> <input type="button" value="Ok" onclick="javascript: calc();"/>  
</body>  
</html> 
复制代码

 

posted @   xh_Blog  阅读(162)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示