实现效果需要自行导入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. 微信小程序开发 -- 设置屏幕亮度

    wx.setScreenBrightness(OBJECT) 设置屏幕亮度. OBJECT参数说明: 参数 类型 必填 说明 value Number 是 屏幕亮度值,范围 0~1,0 最暗,1 最亮 ...

  2. Django 中CSRF中间件 'django.middleware.csrf.CsrfViewMiddleware',

    1.Django中CSRF中间件的工作原理及form表单提交需要添加{% csrf_token %}防止出现403错误 CSRF # 表示django全局发送post请求均需要字符串验证功能:防止跨站 ...

  3. Leetcode 447.回旋镖的数量

    回旋镖的数量 给定平面上 n 对不同的点,"回旋镖" 是由点表示的元组 (i, j, k) ,其中 i 和 j 之间的距离和 i 和 k 之间的距离相等(需要考虑元组的顺序). 找 ...

  4. [luoguP2569] [SCOI2010]股票交易（DP + 单调队列）

    传送门 $f[i][j]$ 表示第i天,手中股票数为j的最优解 初始化 $f[i][0]=0$ $0<=i<=n$ 4种方式转移 以前没买过,第i天凭空买 $f[i][j]=-j*ap$ ...

  5. Linux服务器的安装

    命令:1． mount /mnt/cdrom/回车 安装光驱2． cd /mnt/cdrom/ 进入光驱目录3． cd /mnt/cdrom/RedHat/RPMS/ 进入RPMS目录4． rpm - ...

  6. http请求代理proxy-ajax

    今天把项目中的反向代理脚本程序抽成了一个插件,通过配置文件配置代理的http请求,这样使用起来比较方便,每位开发成员都可以用自己配置的代理调试代码.也可以用来直接做http代理,你甚至都不用Charl ...

  7. 洛谷P1101 单词方阵

    题目描述 给一nXn的字母方阵,内可能蕴含多个“yizhong”单词.单词在方阵中是沿着同一方向连续摆放的.摆放可沿着8个方向的任一方向,同一单词摆放时不再改变方向,单词与单词之间[color=red ...

  8. 转 SPOOLING技术——操作系统

    传送门 SPOOLING技术——操作系统 SPOOLING技术(Simultaneous Peripheral Operating On Line) 同时联机外围操作技术,它是关于慢速字符设备如何与计 ...

  9. YUV和RGB格式分析【转】

    转自:http://www.cnblogs.com/silence-hust/p/4465354.html 做嵌入式项目的时候,涉及到YUV视频格式到RGB图像的转换,虽然之前有接触到RGB到都是基于 ...

  10. C语言中的bool类型

    C99中提供了一个头文件 <stdbool.h> 定义了bool代表_Bool,true代表1,false代表0.只要导入 stdbool.h ,就能非常方便的操作布尔类型了. 代码如下: ...