实现效果需要自行导入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. [Android Studio篇][1] AS开发中遇到问题汇总

    1 在android新建文件,提示权限不够,增加权限 修改工程下 main/AndroidMainfest.xml增加 <uses-permission android:name="a ...

  2. 【转】Building a RESTful Web Service

    目标 构建一个service,接收如下HTTP GET请求: [plain] view plain copy   http://localhost:8080/greeting 并返回如下JSON格式的 ...

  3. BZOJ 3626 [LNOI2014]LCA ——树链剖分

    思路转化很巧妙. 首先把询问做差分. 然后发现加入一个点就把路径上的点都+1,询问的时候直接询问到根的路径和. 这样和原问题是等价的,然后树链剖分+线段树就可以做了. #include <map ...

  4. Jdbc执行存储过程报数据库事务无法执行的异常

    Jdbc执行存储过程报数据库事务无法执行的异常 环境: Eclipse+Jdk1.7+spring-jdbc-3.0.7+同版本的jdbctemplate+Sqlserver 2012 问题: 一个小 ...

  5. 常用的UltraEdit使用技巧

    Tip 1: Alt+C 列模式可以说最初选择使用这个文本编辑软件,原因很简单,就是因为"她"具有列编辑模式.如果您还不知道什么是列编辑模式的话,我想您应该好好研究一下啦.这是一个 ...

  6. win7中如何恢复UltraEdit的默认配置

    自己win7上安装的UltraEdit 17.10.0.1015.由于编码格式不知道什么时候被改乱了,导致UE编写的java程序出现如下两种编译错误: D:\jcode>javac testco ...

  7. SharePoint中使用Global.asax

    Global.asax是ASP.Net应用程序的一个文件,用来处理Application级别的事情.可以添加自定义代码到这个文件,详细使用方式见 http://msdn.microsoft.com/e ...

  8. 相关分析 BZOJ 4821

    相关分析 [问题描述] Frank对天文学非常感兴趣,他经常用望远镜看星星,同时记录下它们的信息,比如亮度.颜色等等,进而估算出星星的距离,半径等等.Frank不仅喜欢观测,还喜欢分析观测到的数据.他 ...

  9. Install Qualcomm Development Environment

    安裝 Android Development Environment http://www.cnblogs.com/youchihwang/p/6645880.html 除了上述還得安裝, sudo ...

  10. LeetCode OJ--Permutations II

    给的一个数列中,可能存在重复的数,比如 1 1  2 ,求其全排列. 记录上一个得出来的排列,看这个排列和上一个是否相同. #include <iostream> #include < ...