jquery 随机颜色值 并且保证 背景颜色为 深色, 文字颜色为 浅色

jquery 随机颜色值 并且保证 背景颜色为 深色, 文字颜色为 浅色,第1张

首先我不是很懂颜色,我只能大概给你,但是我不确定是不是能满足你的深色和浅色

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

div {

width: 200px;

height: 200px;

background: #C5C5C5;

}

animation {

animation: flash 2s linear 0s both;

-webkit-animation: flash 2s linear 0s both;

}

@keyframes flash {

from {

transform: translate(0, 0)

}

to {

transform: translate(200px, 0)

}

}

@-webkit-keyframes flash {

from {

transform: translate(0, 0)

}

to {

transform: translate(200px, 0)

}

}

</style>

</head>

<body class="body">

<div class="div1"></div>

<div class="div2"></div>

<button type="button">点我</button>

</body>

<script src="//cdnbootcsscom/jquery/1110/jqueryjs" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$('button')on("click", function() {

$('div')addClass('animation');

var getRandomColor = function() {

return '#' +

(function(color) {

return(color += '0123401234abcabc' [Mathfloor(Mathrandom() 16)]) &&

(colorlength == 6) color : argumentscallee(color);

})('');

}

var getRandomColor = function() {

return '#' +

(function(color) {

return(color += '5678956789defdef' [Mathfloor(Mathrandom() 16)]) &&

(colorlength == 6) color : argumentscallee(color);

})('');

}

consolelog(getRandomColor())

$("div1")css({

"background":getRandomColor

});

$("div2")css({

"background":getRandomColor

});

})

</script>

</html>

1、先使用jQuery选择器找到所有的文本框

2、为文本框注册获得焦点事件,即focus事件

3、在焦点事件的事件处理函数中对当前得到焦点的文本框设置背景色

4、注册失去焦点事件,即blur事件

5、在失去焦点的事件处理函数中对当前触发事件的文本框改变背景颜色

<script type="text/javascript">

    $(function(){

        //找到文本框,并注册得到焦点事件

        $("input:text")focus(function(){

            //让当前得到焦点的文本框改变其背景色

            $(this)css("background","pink");

        });

        //找到文本框,并注册失去焦点事件

        $("input:text")blur(function(){

            //让当前失去焦点的文本框背景色变为白色

            $(this)css("background","white");

        });

    });

</script>

<input id="txt" value="我是可以改变颜色的!" />

<input type="button" id="btn" value="点我哈" />

<script 导入你的jQuery库 />

<script>

$(function(){

$("#btn")click(function(){

alert("这是文本框的值:"+$("#txt")val());

$("#txt")css("color","red");

});

});

</script>

<div id="box" style="width:100px; height:100px; border:1px solid #000"></div>

<input id="rndc" type="button" value="随机变色"/>

<script>

function rc(){

   return parseInt(Mathrandom()256);

}

$(function(){

   $("#rndc")click(function(){

      $("#box")css("background-color","rgb("+rc()+","+rc()+","+rc()+")");

   });

});

</script>

以上就是关于jquery 随机颜色值 并且保证 背景颜色为 深色, 文字颜色为 浅色全部的内容,包括:jquery 随机颜色值 并且保证 背景颜色为 深色, 文字颜色为 浅色、JQuery文本框 获得焦点 背景颜色改变、jquery 怎么将输入到文本框中的值查找出来后变颜色等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9561537.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-29
下一篇 2023-04-29

发表评论

登录后才能评论

评论列表(0条)

保存