实现效果需要自行导入jquery.js

<!DOCTYPE html>

<html lang="en">

<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()" id="insC"></section>

        <input type="text" id="insInput" oninput="instantChange()" onpropertychange="instantChange()" placeholder="请您输入十六进制颜色码，如#123123。" maxlength="7">

        <button onclick="instantClick()">确认</button>

    </div>

    <center>

        <h2 style="display:inline-block;">颜色主题jquery变换</h2>

        <form action="" id="simpleCalc">

            <span>input：</span><input type="text" required><br><br>

            <button id="calc">开始计算</button>

        </form>

        <span id="result"></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>

如有错误，请您指正！

jquery+css 实现即时变化颜色主题（通过input输入颜色值进行改变）的更多相关文章

  1. jquery+css实现网页颜色主题变换（只改变已设置好的几种颜色主题）

    又遇到颜色主题变化,这次使用了jquery+css,使用了函数传值,而不是之前网站换肤改变link的方法. 首先是设置好颜色主题后,点击改变页面颜色主题.(需要自行导入jquery.js后查看效果) ...

  2. 修改vim的颜色主题 及显示行号

    1.打开vim窗口,输入命令:color 或者colorscheme后回车查看当前颜色主题. 2. 输入:colorscheme <主题> 即可设置当前vim的颜色主题. sample: ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  5. jquery css

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...

  6. Jquery CSS 与 Attr

    今天用Jquery想动态更改一张位图的src发现css不好用,查看Jquery文档好像是css是设置样式的属性的,如颜色,字体,背景等,而attr貌似是能操作所有属性,包括Jquery未封装的属性. ...

  7. jQuery css,position,offset,scrollTop,scrollLeft用法

    jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...

  8. css里颜色的那些事儿(合法颜色值)

    css中主要有六种方法指定颜色: 1.十六进制颜色 2.RGB颜色 3.RGBA颜色 4.HSL色彩 5.HSLA颜色 6.预定义/跨浏览器的颜色名称 前三种是我们最常见的,也是用的最多的,而后三种对 ...

  9. macOS中Vim基本配置，颜色主题/语法/indent设置

    macOS中Vim基本配置 Vim的初始化配置 .vimrc 存放位置 macOS 环境下 vim 的初始化配置文件为 .vimrc , 通常有两个(系统版本和用户版本),一个位于 /usr/shar ...

随机推荐

  1. python-高级编程-05-异步IO

    [异步非阻塞IO] ------------------------------------------------------------------------------------------ ...

  2. Educational Codeforces Round 20 D. Magazine Ad

    The main city magazine offers its readers an opportunity to publish their ads. The format of the ad ...

  3. poj1985&&第四次CCF软件认证第4题 求树的直径

    Cow Marathon Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 4216   Accepted: 2137 Case ...

  4. 【bzoj1717】[Usaco2006 Dec]Milk Patterns 产奶的模式 SA+二分

    Description 农夫John发现他的奶牛产奶的质量一直在变动.经过细致的调查,他发现:虽然他不能预见明天产奶的质量,但连续的若干天的质量有很多重叠.我们称之为一个“模式”. John的牛奶按质 ...

  5. Keepalived中Master和Backup角色选举策略

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://ixdba.blog.51cto.com/2895551/1544858 在Kee ...

  6. Python tldextract模块准确获取域名和后缀

    Python tldextract 模块 - 功能说明 tldextract准确地从URL的域名和子域名分离通用顶级域名或国家顶级域名. 例如,http://www.google.com,你只想取出连 ...

  7. uva 12723 概率dp

    Dudu is a very starving possum. He currently stands in the first shelf of a fridge. This fridge isco ...

  8. FOJ Problem 2256 迷宫

                                                                                                        ...

  9. 【CF1015B】Obtaining the String（模拟）

    题意:给定两个字符串,每次可以交换相邻两个字符,给出任意一组交换次数小于1e4的方案使得a串成为b串,输出交换的次数与位置,无解输出-1 n<=50 思路:每次找到第一个不相同的字符,从后面找到 ...

  10. js 路径改变时获取url参数

    当我们在使用react或vue的router作路由跳转时,为了保持菜单与地址栏状态一致,我们可以使用window.onhashchange捕获#后面的变化 window.onhashchange = ...