임의의 색상은 두 가지 형식으로 제공됩니다.
효과 미리보기 : http://wjf444128852.github.io/demolist/js/test/index.html
1. RGB (XXX, XXX, XXX)
2. #xxxxxx
다음 두 가지 무작위 방법이 구현됩니다
아이디어 : x를 무작위로 만드는 방법
1. 그것의 xxx는 0-255 사이의 임의의 정수입니다. Math.random ()*255를 사용하여 0-255 사이의 난수를 얻으십시오.
그런 다음 Math.floor ()는 소수점을 유지합니다
2. X는 0123456789ABXDEF에서 6의 무작위 조합입니다.
여기에서 배열이나 문자열을 사용하여 처리 할 수 있습니다. 여기에서 배열을 사용합니다. 배열에서 6 번만 가져 가서 배열 위시가 매번 0과 16 사이의 임의의 정수입니다.
참고 (메소드 2의 변경은 #xxxx이지만 브라우저는이 경우 DOM 요소의 배경색 속성 값을 확인하지만 JS의 할당은 #xxx 형식입니다.)
코드는 다음과 같습니다.
HTML
<body> <div> <p> <a href = "JavaScript :;" id = "btn-one"> randomcolor-rgb </a> </p> <ul> <li> <li> <div> </li> <li> <li> <div> </div> </li> <li> <li> </div> </li> <li> <li> <div> </div> <li> <li> </li> <li> <li> <li> <li> <liv> </div> </li> <li> <li> <div> </div> </li> <li> <div> </li> <li> <li> <div> </div> </li> <li> <li> </div> </li> <li> <li> <div> </div> </li> <li> <li> <li> <li> <li> <li> <li> <div> </div> </li> </ul> </div> </body>
CSS
*{Box-Sizing : Border-Box; 목록 스타일 : 없음; 국경 : 없음; 패딩 : 0; 여백 : 0; } p {텍스트-정렬 : 센터; 마진 : 20px; } pa {font-size : 20px; 글꼴 중량 : 300; 색상 : #e4393c; 텍스트 결정 : 없음; 패딩 : 6px 10px; 국경 : 1px 고체 전류 검색기; } .bg_color, .bg_two {너비 : 100px; 높이 : 100px; 테두리 : 1px 고체 #AA00AA; } .main, .main ul {오버플로 : 숨겨; } .main {너비 : 400px; 마진 : 30px 자동; } .main ul li {float : 왼쪽; }JS
<script> (function () {// 1. 랜덤 색상 함수 -RGB 함수 getRandomColor () {var rgb = 'rgb ('+math.floor (math.random ()*255)+','+math.floor (math.random ()*255)+','+Math.Random ()*25)+',', ',', ',' +math.random ()*255) '; i = 0; divs. divs [ '0', '1', '2', '3', '4', '5', '6', '7', '9', 'a', 'c', 'd', 'e', 'f']; Math.random ()*16); }) () </script>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.