实现效果需要自行导入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. springboot集成shiro——登陆记住我

    在shiro配置类中增加两个方法: com.resthour.config.shrio.ShiroConfiguration /** * cookie管理对象 * @return */ @Bean p ...

  2. c++中vector容器的功能及应用。

    vector基本操作:  1.头文件 #include<vector>. 注:一定要加上using namespace std;  2.vector对象的创建: vector<int ...

  3. 九度oj 题目1470：调整方阵

    题目描述: 输入一个N(N<=10)阶方阵,按照如下方式调整方阵:1.将第一列中最大数所在的行与第一行对调.2.将第二列中从第二行到第N行最大数所在的行与第二行对调. 依此类推...N-1.将第 ...

  4. oracle查询包含大小写的数据

    查询包含小写的所有数据: select oper_no from info_oper where regexp_like(oper_no,'[[:lower:]]'); select oper_no  ...

  5. 【Luogu】P1472奶牛家谱（DP）

    题目链接 这是一道考思维的好题. 一开始设f[i][j]是i个点刚好j层的方案数,死活调不出来,看题解发现可以改为<=j层的方案数,最后输出f[n][m]-f[n][m-1]就好了. 对于计算考 ...

  6. codeforces 446C DZY Loves Fibonacci Numbers 数论+线段树成段更新

    DZY Loves Fibonacci Numbers Time Limit:4000MS     Memory Limit:262144KB     64bit IO Format:%I64d &a ...

  7. 【POJ3352】Road Construction（边双联通分量）

    题意:给一个无向图,问最少添加多少条边后能使整个图变成双连通分量. 思路:双连通分量缩点,缩点后给度为1的分量两两之间连边,要连(ans+1) div 2条 low[u]即为u所在的分量编号,flag ...

  8. linux-3.2.36内核启动2-setup_arch中的内存初始化1（arm平台 分析高端内存和初始化memblock）【转】

    转自:http://blog.csdn.net/tommy_wxie/article/details/17093307 上一篇微博留下了这几个函数,现在我们来分析它们         sanity_c ...

  9. AC日记——城市 洛谷 P1401

    题目描述 N(2<=n<=200)个城市,M(1<=m<=40000)条无向边,你要找T(1<=T<=200)条从城市1到城市N的路,使得最长的边的长度最小,边不能 ...

  10. js-压缩混淆工具 uglifyjs

    单个打包文件npm install uglify-js -g 使用uglifyjs压缩js uglifyjs 原始js文件 -m -c -o 压缩后js文件 uglifyjs 原始js文件 -b -c ...