JavaScript에서 무작위 선택 효과를 구현하는 방법은 무엇입니까? (코드 예)
- 青灯夜游앞으로
- 2018-10-16 16:49:435198검색
JavaScript에서 무작위 선택 효과를 얻는 방법은 무엇입니까? 이 기사에서는 JavaScript에서 무작위 선택 효과를 얻는 방법(코드 예)을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
업무상 무작위로 선택된 사람들과 함께 작은 웹페이지를 작성했습니다. 먼저 렌더링을 살펴보겠습니다.
배경도 다이나믹한데 쓰다보니 문제가 생겼습니다. 즉, 난수를 발생시키는 조작 인터페이스 위에 다이나믹한 유성우를 발생시키는 캔버스를 올려놓으면, 난수 생성을 위한 인터페이스를 볼 수 없습니다.
동적 특수 효과를 생성하는 캔버스는 작업 인터페이스에서 p의 위치를 차지합니다. 나중에 p를 캔버스 위에 배치하고 위치를 차지하지 않도록 p의 위치를 설정한 다음 레이아웃을 설정했습니다. 완료되었습니다.
js 애니메이션을 웹 페이지의 배경으로 설정하는 다른 방법이 있는지 모르겠습니다. 아시는 분 계시면 알려주세요.
첨부된 코드는 전체 페이지에 대한 코드입니다.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>java</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">/script>
</head>
<style>
body {
overflow: hidden; /*当内容溢出时，不显示*/
/* background-image: url("image/流星雨.jpg"); */}.pv {
position: absolute;
top: 50px;
left: 42%;
width: 268px;
height: 600px;
}
#num {
text-align: center;
color: white;
font-size: 40px;
}
.button {
text-align: center;
}
#img {
width: 268px;
height: 271px;
}
#canvas {}
</style>
<body>
<p class="pv">
<img class="img-thumbnail" alt="头像" id="img" src="image/yuan.jpg">
<p id="num"></p>
<p class="button">
<button id="start" class="btn btn-success">开始</button>
<button id="stop" class="btn btn-info">结束</button>
</p>
</p>
<!--
<canvas>画布 画板 画画的本子 -->
<canvas width=400 height=400 style="background: #000000;" id="canvas"></canvas>
<!--
javascript 画笔 --></body><script type="text/javascript">
var num = document.getElementById("num");
var img = document.getElementById("img");
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var image = [ "image/XX.jpg", "image/zXXn.jpg","image/XX.jpg", "image/XX.jpg", "image/XX.jpg","image/XX.jpg" ];
var arr = [ "曹XX", "赵XX", "XX", "李XX", "马XX", "沈XX" ];
var intv = null;
start.onclick = function() {
if (intv == undefined) {
intv = setInterval(function() {
var random = Math.floor(Math.random() * 6);
num.innerHTML = arr[random];
img.src = image[random];
}, 500);
}
}
stop.onclick = function() {
clearInterval(intv);
intv = null;
} /* 下面是流星雨代码 */
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var s = window.screen;
var w = s.width;
var h = s.height;
canvas.width = w;
canvas.height = h;
var fontSize = 14;
var clos = Math.floor(w / fontSize);
var drops = [];
var str = "qwertyuiopasdfghjklzxcvbnm";
for (var i = 0; i < clos; i++) {
drops.push(0);
}
function drawString() {
ctx.fillStyle = "rgba(0,0,0,0.05)"
ctx.fillRect(0, 0, w, h);
ctx.font = "600 " + fontSize + "px 微软雅黑";
ctx.fillStyle = "#00ff00"; for (var i = 0; i < clos; i++) {
var x = i * fontSize; var y = drops[i] * fontSize;
ctx.fillText(str[Math.floor(Math.random() * str.length)], x, y);
if (y > h && Math.random() > 0.99) {
drops[i] = 0;
}
drops[i]++;
}
}
setInterval(drawString, 30);</script></html>
부적절한 내용이 있으면 조언 부탁드립니다.
요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼, jQuery 비디오 튜토리얼, bootstrap 튜토리얼을 방문하세요!
위 내용은 JavaScript에서 무작위 선택 효과를 구현하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：탭 개발의 간단한 예(코드)다음 기사：탭 개발의 간단한 예(코드)