实现效果需要自行导入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. Baum-Welch算法(EM算法)对HMM模型的训练

    Baum-Welch算法就是EM算法,所以首先给出EM算法的Q函数 \[\sum_zP(Z|Y,\theta')\log P(Y,Z|\theta)\] 换成HMM里面的记号便于理解 \[Q(\lam ...

  2. 聊聊、Java Keytool P12 转 JKS

    最近公司合作机构需要更改服务证书,总共给了 3 个文件过来.openapi-cert.p12.openapi-cert.key.openapi-cert.crt. openapi-cert.crt - ...

  3. js时间格式化工具，时间戳格式化，字符串转时间戳

    在开发中经常会用到时间格式化,有时候在网上搜索一大堆但不是自己想要的,自己总结一下,写一个时间格式化工具方便以后直接使用,欢迎大家来吐槽…… 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  4. sgen.exe 未能运行

    指定的任务可执行文件“sgen.exe”未能运行.文件名或扩展名太长. 解决方式,右键项目属性->生成  把下图红框的“开”设置成“自动”

  5. web结对项目

    一.Coding.Net项目地址:        https://git.coding.net/verde/Pair_Work.git 二.对接口进行的设计 看教科书和其它资料中关于Informati ...

  6. 【转】深入JVM系列（一）之内存模型与内存分配

    http://lovnet.iteye.com/blog/1825324 一.JVM内存区域划分   大多数 JVM 将内存区域划分为 Method Area(Non-Heap),Heap,Progr ...

  7. Android中动态改变控件的大小的一种方法

    在Android中有时候我们需要动态改变控件的大小.有几种办法可以实现  一是在onMeasure中修改尺寸,二是在onLayout中修改位置和尺寸.这个是可以进行位置修改的,onMeasure不行. ...

  8. 【bzoj3680】吊打XXX 随机化

    题目描述 gty又虐了一场比赛,被虐的蒟蒻们决定吊打gty.gty见大势不好机智的分出了n个分身,但还是被人多势众的蒟蒻抓住了.蒟蒻们将n个gty吊在n根绳子上,每根绳子穿过天台的一个洞.这n根绳子有 ...

  9. Rust 内存管理

    Rust 内存管理 Rust 与其他编程语言相比,最大的亮点就是引入了一套在编译期间,通过静态分析的方式,确定所有对象的作用域与生命周期,从而可以精确的在某个对象不再被使用时,将其销毁,并且不引入任何 ...

  10. NOIP2017赛前模拟(4):总结

    题目: 1.打牌 给定n个整数(n<=1000000),按照扑克牌对子(x,x)或者顺子(x,x+1,x+2)打出牌···问最多可以打出多少次对子或者顺子?牌的大小<=1000000 2. ...