点击随机改变a连接颜色及内部数值

Original 2019-03-27 18:55:14 148
abstract:点击按钮,随机改变颜色,同时随机改变内部数值;鼠标指向时,圆角变小,且有光晕。<!doctype html><html><head><meta charset="UTF-8"><title>点击随机换色</title><!-- 标题左侧的小图标 --><link rel="ico
点击按钮,随机改变颜色,同时随机改变内部数值;鼠标指向时,圆角变小,且有光晕。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>点击随机换色</title>

<!-- 标题左侧的小图标 -->

<link rel="icon" type="image/x-icon" href="">

<link rel="stylesheet" href=""> <!-- 引入外部css -->

<!-- 引入jquery -->

<script src="jquery/jquery-3.3.1.min.js"></script> 

<style>

a{

display: block;

float: left;

margin: 50px;

width: 100px;

height: 100px;

line-height: 100px;

text-align:center;

color: #fff;

border-radius: 50px;

text-decoration: none;

/*background: green;*/

}


</style>

<script>

//改变标签的随机颜色

var a = 0;

function yanse(tag){

var len = document.getElementsByTagName(tag).length;

for (var i = 0;i<len;i++){

document.getElementsByTagName(tag)[i].style.backgroundColor='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';

document.getElementsByTagName(tag)[i].innerHTML=Math.floor(Math.random()*100);

}

}


$(document).ready(function(){

$("a").mouseover(function(){

$bg = $(this).css("backgroundColor");

$(this).css("box-shadow","0px 0px 20px "+$bg);

$(this).css("border-radius","20px");

})

$("a").mouseleave(function(){

$(this).css("box-shadow","none");

$(this).css("border-radius","50px");

})

})

</script>

</head>

<body>

<a href="#"></a>

<a href="#"></a>

<a href="#"></a>

<a href="#"></a>

<button onclick="yanse('a')">点 击</button>

</body>

</html>


Correcting teacher:天蓬老师Correction time:2019-03-28 09:56:16
Teacher's summary:获取获取颜色, 本质就是随机的改变RGB的值, 原理不难, 重在动手写

Release Notes

Popular Entries