随机点名系统1
描述：点击单选按钮时，随机选中一个成员。点击多选按钮时，多选按钮变成停止按钮，点击停止按钮前，不断随机选择成员，直到点击停止按钮，定时器停止，得到最后一个被随机选中的成员，停止按钮变成多选按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
background: #444;
}
h1,h2{
text-align: center;
margin: 50px 0;
}
.nameBox{
width: 1000px;
height: auto;
padding: 10px;
border: 2px solid #ccc;
margin: 0 auto;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.box1{
position: relative;
width: 1000px;
height: 60px;
margin: 10px auto;
border: 2px solid #ccc;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.btn, .btn1{
position: relative;
width: 100px;
height: 50px;
margin: 0 10px;
text-align:center;
background-color: green;
color: #fff;
font-size: 20px;
border: none;
outline: none;
cursor: pointer;
}
.name{
display: inline-block;
justify-content: space-between;
width: 80px;
height: 30px;
background-color: yellow;
text-align: center;
line-height: 30px;
margin: 10px;
}
.clickName{
color: red;
}
</style>
</head>
<body>
<h1>随机点名系统</h1>
<h2>恭喜选中：<span class="clickName" id="clickName"></span></h2>
<div id="box" class="box">
<div id="nameBox" class="nameBox"></div>
<div class="box1" id="box1">
<input type="button" name="btn" class="btn" id="btn" value="多选">
<input type="button" name="btn1" class="btn1" id="btn1" value="单选">
</div>
</div>
<script>
// 数据准备
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 获取元素
var box = document.getElementById("box");
var nameBox = document.getElementById("nameBox");
var btn = document.getElementById("btn");
var btn1 = document.getElementById("btn1");
var clickName = document.getElementById("clickName");
// 定时器名
var timeId = null;
// 根据名字数组渲染到页面
arr.forEach(function(value, index, self){
// 创建新元素
var nameSpan = document.createElement("span");
// 为新创建的元素添加属性
nameSpan.className = "name";
nameSpan.innerHTML = value;
nameBox.appendChild(nameSpan);
});
// 添加点名事件(多选)
btn.onclick = function(){
// 如果按钮显示点名，点击开始点名
if(this.value === "多选"){
// 创建一个定时器，使用箭头函数
timeId = setInterval(function() {
// 首先清空样式
arr.forEach(function(value, index, self){
nameBox.children[index].style.backgroundColor = "";
nameBox.children[index].style.color = "";
})
// 随机选择名字
var randomName = parseInt(Math.random()*arr.length);
// 将随机选中的名字添加样式
nameBox.children[randomName].style.backgroundColor = "red";
nameBox.children[randomName].style.color = "#FFF";
clickName.innerHTML = nameBox.children[randomName].innerHTML;
}, 100);
// 将点名按钮变为停止按钮
this.value = "停止";
this.style.backgroundColor = "red";
}else{
// 如果此时是停止按钮，点击停止按钮，清除计时器
clearInterval(timeId);
// 将停止按钮变为点名按钮
this.value = "多选";
this.style.backgroundColor = "green";
}
}
// 添加点名事件(单选)
btn1.onclick = function(){
// 首先清空样式
arr.forEach(function(value, index, self){
nameBox.children[index].style.backgroundColor = "";
nameBox.children[index].style.color = "";
})
// 随机选择名字
var randomName = parseInt(Math.random()*arr.length);
// 将随机选中的名字添加样式
nameBox.children[randomName].style.backgroundColor = "red";
nameBox.children[randomName].style.color = "#FFF";
clickName.innerHTML = nameBox.children[randomName].innerHTML;
}
</script>
</body>
</html>
随机点名系统2
描述：点击单选按钮时，随机选中一名成员。点击多选按钮时，随机选择10次后，定时器停止，得到最后一个被随机选中的成员。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
background: #444;
}
h1,h2{
text-align: center;
margin: 50px 0;
}
.nameBox{
width: 1000px;
height: auto;
border: 2px solid #ccc;
margin: 0 auto;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.box, .box1{
width: 1000px;
height: 60px;
margin: 10px auto;
border: 2px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.btn, .btn1{
width: 100px;
height: 50px;
margin: 0 10px;
text-align:center;
background-color: green;
color: #fff;
font-size: 20px;
border: none;
outline: none;
cursor: pointer;
}
.name{
display: inline-block;
justify-content: space-between;
width: 80px;
height: 30px;
background-color: yellow;
text-align: center;
line-height: 30px;
margin: 10px;
}
.clickName{
color: red;
}
</style>
</head>
<body>
<h1>随机点名系统</h1>
<div id="box" class="box">
<h2>恭喜选中：<span class="clickName" id="clickName"></span></h2>
</div>
<div id="nameBox" class="nameBox"></div>
<div class="box1" id="box1">
<input type="button" name="btn" class="btn" id="btn" value="多选">
<input type="button" name="btn1" class="btn1" id="btn1" value="单选">
</div>
<script>
// 数据准备
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 获取元素
var nameBox = document.getElementById("nameBox");
var btn = document.getElementById("btn");
var btn1 = document.getElementById("btn1");
var clickName = document.getElementById("clickName");
// 根据名字数组渲染到页面
arr.forEach(function(value, index, self){
// 创建新元素
var nameSpan = document.createElement("span");
// 为新创建的元素添加属性
nameSpan.className = "name";
nameSpan.innerHTML = value;
nameBox.appendChild(nameSpan);
});
// 添加点名事件(多选)
btn.onclick = function(){
let count = 0;
// 创建一个定时器，使用箭头函数
let timeId = setInterval(() => {
// 首先清空样式
arr.forEach(function(value, index, self){
nameBox.children[index].style.backgroundColor = "";
nameBox.children[index].style.color = "";
})
// 随机选择名字
var randomName = parseInt(Math.random()*arr.length);
count++;
// 将随机选中的名字添加样式
nameBox.children[randomName].style.backgroundColor = "red";
nameBox.children[randomName].style.color = "#FFF";
clickName.innerHTML = nameBox.children[randomName].innerHTML;
// 多选到第十个就停止
if(count >= 10){
clearInterval(timeId);
}
}, 100);
}
// 添加点名事件(单选)
btn1.onclick = function(){
// 首先清空样式
arr.forEach(function(value, index, self){
nameBox.children[index].style.backgroundColor = "";
nameBox.children[index].style.color = "";
})
// 随机选择名字
var randomName = parseInt(Math.random()*arr.length);
// 将随机选中的名字添加样式
nameBox.children[randomName].style.backgroundColor = "red";
nameBox.children[randomName].style.color = "#FFF";
clickName.innerHTML = nameBox.children[randomName].innerHTML;
}
</script>
</body>
</html>
通过画布制作——代码雨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html, body{
overflow: hidden;
}
</style>
</head>
<body>
<!-- 创建一个画布 -->
<canvas id="myCanvas" class="myCanvas"></canvas>
<script>
// 获取元素
let myCanvas = document.getElementById("myCanvas");
// 设置画布宽高，将宽高设置为浏览器的屏幕可用宽度
// availWidth 属性声明了显示浏览器的屏幕的可用宽度，以像素计
myCanvas.width = screen.availWidth;
myCanvas.height = screen.availHeight;
// 获取画布宽度并放入一个常量里面
const width = myCanvas.width;
const height = myCanvas.height;
// 将画布设为2d对象
let ctx = myCanvas.getContext("2d");
// 创建一个数组
let arr = Array(Math.ceil(width / 10)).fill(0);
// console.log(arr);
// 创建一个字符串
let str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
// 使用分隔符将其切割为数组
let arr1 = str.split("");
// console.log(arr1);
function rain(){
// 为画布创建蒙层，通过不断的覆盖前面的画面，实现部分显示的效果
// 设置fillStyle属性可以是CSS颜色，渐变，或图案
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
// 设置蒙层填充方式
ctx.fillRect(0, 0, width, height);
// 再将画布上的字体颜色设置为绿色
ctx.fillStyle = "#0f0";
// 遍历数组
arr.forEach(function(value, index, self){
// 随机获取str数组成员下标
let random = parseInt(Math.random() * str.length);
// 在画布上绘制实心文本
ctx.fillText(str[random], index * 10, value + 10);
// 设置下雨效果
arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
});
}
// 设置定时器
setInterval(rain, 30);
</script>
</body>
</html>
通过画布制作——道家真言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
// 获取元素
let myCanvas = document.getElementById("myCanvas");
// 设置画布宽高，将宽高设置为浏览器的屏幕可用宽度
// availWidth 属性声明了显示浏览器的屏幕的可用宽度，以像素计
myCanvas.width = screen.availWidth;
myCanvas.height = screen.availHeight;
// 获取画布宽度并放入一个常量里面
const width = myCanvas.width;
const height = myCanvas.height;
// 将画布设为2d对象
let ctx = myCanvas.getContext("2d");
// 创建一个数组，因为后面一个字50px,所以用总宽度除以50恰好够用,不至于浪费资源
let arr = Array(Math.ceil(width / 10)).fill(0);
// 创建一个字符串，里为了不出现下坠的视觉效果，所以加了很多空格
let str = "临兵斗者皆阵列前行乾坤震巽坎离艮 ";
// 使用分隔符将其切割为数组
let arr1 = str.split("");
function rain(){
// 为画布创建蒙层，通过不断的覆盖前面的画面，实现部分显示的效果
// 设置fillStyle属性可以是CSS颜色，渐变，或图案
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
// 设置蒙层填充方式
ctx.fillRect(0, 0, width, height);
// 再将画布上的字体颜色设置为绿色
ctx.fillStyle = "#f00";
// 遍历数组
arr.forEach(function(value, index, self){
// 设置字体类型、大小
ctx.font = "50px 华文行楷";
// 随机获取str数组成员下标
let random = parseInt(Math.random() * str.length);
// 在画布上绘制实心文本
ctx.fillText(str[random], index * 50, value + 50);
// 设置显示效果
arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 50;
});
}
// 设置定时器
setInterval(rain, 30);
</script>
</body>
</html>
实现一个拖拽剪裁效果
描述：在大容器内，可以对拖拽剪裁位置，可以放大缩小剪裁范围大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 800px;
height: 570px;
border: 1px solid #000;
margin: 30px auto;
}
img{
width: 800px;
height: 570px;
}
.mark{
position: absolute;
background-color: rgba(55, 55, 55, 0.8);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cut{
position: absolute;
width: 150px;
height: 150px;
top: 0;
left: 0;
background-color: rosybrown;
cursor: pointer;
}
.ovh{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.ovh img{
position: absolute;
top: 0;
left: 0;
}
.dot{
position: absolute;
right: -10px;
bottom: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: brown;
cursor: nw-resize;
}
</style>
</head>
<body>
<!-- 外围容器 -->
<div id="box" class="box">
<img src="../images/多肉.png" alt="">
<!-- 蒙层 -->
<div id="mark" class="mark"></div>
<!-- 剪切框 -->
<div id="cut" class="cut">
<div id="ovh" class="ovh">
<img src="../images/多肉.png" alt="">
</div>
<!-- 缩放剪切框按钮 -->
<div id="dot" class="dot"></div>
</div>
</div>
<script>
// 停止默认事件
// onselectstart 事件是选中的事件
document.onselectstart = function (e) {
e.preventDefault();
}
// ondragstart 事件是拖拽事件
document.ondragstart = function (e) {
e.preventDefault();
}
// 获取元素
let box = document.getElementById("box");
let cut = document.getElementById("cut");
let cutImg = document.querySelector(".ovh img");
let dot = document.getElementById("dot");
// 获取外围容器的宽高
let boxWidth = box.clientWidth;
let boxHeight = box.clientHeight;
// 鼠标弹起事件
document.onmouseup = function () {
document.onmousemove = null;
}
// 剪切框点击事件
cut.onmousedown = function(e){
// 浏览器兼容处理
let event = e || window.event;
// 获取当前鼠标位置
let oldX = event.clientX;
let oldY = event.clientY;
// 获取剪切框定位值
let cutLeft = cut.offsetLeft;
let cutTop = cut.offsetTop;
// 获取剪切框宽高
let cutWidth = cut.clientWidth;
let cutHeight = cut.clientHeight;
// 剪切框移动事件
document.onmousemove = function(e){
// 浏览器兼容处理
let event = e || window.event;
// 获取鼠标移动后的位置
let movedX = event.clientX;
let movedY = event.clientY;
// 计算此时剪切框位置
let resultX = movedX - oldX + cutLeft;
let resultY = movedY - oldY + cutTop;
// 边界值限定
if(resultX < 0){
resultX = 0;
} else if(resultX > boxWidth - cutWidth){
resultX = boxWidth - cutWidth;
}
if(resultY < 0){
resultY = 0;
} else if(resultY > boxHeight - cutHeight){
resultY = boxHeight - cutHeight;
}
// 设置剪切框移动后的位置
cut.style.left = resultX + "px";
cut.style.top = resultY + "px";
// 剪切框显示的区域跟着变化
cutImg.style.left = -resultX + "px";
cutImg.style.top = -resultY + "px";
}
}
// 剪切框缩放
dot.onmousedown = function(e){
// 浏览器兼容处理
let event = e || window.event;
// 阻止事件冒泡
event.stopPropagation();
// 获取当前鼠标位置
let oldX = event.clientX;
let oldY = event.clientY;
// 获取此时剪切框的宽高
let cutWidth = cut.clientWidth;
let cutHeight = cut.clientHeight;
// 剪切框缩放事件
document.onmousemove = function(e){
// 浏览器兼容处理
let event = e || window.event;
// 获取鼠标移动后的位置
let movedX = event.clientX;
let movedY = event.clientY;
// 获取此时剪切框的定位值
let cutLeft = cut.clientLeft;
let cutTop = cut.clientTop;
// 计算此时剪切框的宽高
let resultX = movedX - oldX + cutWidth;
let resultY = movedY - oldY + cutHeight;
// 边界值限定
if(resultX < 0){
resultX = 0;
} else if(resultX > boxWidth - cutLeft){
resultX = boxWidth - cutLeft;
}
if(resultY < 0){
resultY = 0;
} else if(resultY > boxHeight - cutTop){
resultY = boxHeight - cutTop;
}
// 设置此时剪切框的宽高
cut.style.width = resultX + "px";
cut.style.height = resultY + "px";
}
}
</script>
</body>
</html>
点击创建元素并可以拖拽
描述：点击页面空白位置，在点击的位置生成元素，并且可以点击元素实现拖拽，点击右上角关闭按钮将元素下树
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
window.onclick = function(e){
// 浏览器兼容处理
let event = e || window.event;
// 创建元素
let box = document.createElement("div");
// 准备元素样式
let boxStyle = {
position: "absolute",
width: "100px",
height: "100px",
backgroundColor: "red",
left: event.clientX - 50 + "px",
top: event.clientY - 50 + "px"
}
// 设置元素样式
for (let i in boxStyle){
box.style[i] = boxStyle[i];
}
// 元素上树
document.body.appendChild(box);
// 创建关闭按钮
let closeBtn = document.createElement("div");
// 准备关闭按钮样式
let closeBtnStyle = {
position: "absolute",
width: "20px",
height: "20px",
top: 0,
right: 0,
textAlign: "center",
lineHeight: "20px",
cursor: "pointer"
}
// 设置关闭按钮样式
for (let i in closeBtnStyle){
closeBtn.style[i] = closeBtnStyle[i];
}
closeBtn.innerHTML = "×"
// 元素上树
box.appendChild(closeBtn);
// 阻止冒泡
box.onclick = function(e){
e.stopPropagation();
}
// 点击关闭按钮，元素消失
closeBtn.onclick = function(e){
e.stopPropagation();
box.remove();
}
// 绑定鼠标按下事件
box.onmousedown = function (e) {
// 浏览器兼容处理
let event = e || window.event;
// 获取开始时鼠标位置
let startX = event.clientX;
let startY = event.clientY;
// 获取开始时元素位置
let left = box.offsetLeft;
let top = box.offsetTop;
// 绑定鼠标移动事件
document.onmousemove = function (e) {
// 浏览器兼容处理
let event = e || window.event;
// 获取鼠标移动后位置
let endX = event.clientX;
let endY = event.clientY;
// 计算元素移动后位置
let resultX = endX - startX + left;
let resultY = endY - startY + top;
// 设置元素移动后位置
box.style.left = resultX +"px";
box.style.top = resultY +"px";
}
// 绑定鼠标抬起事件
document.onmouseup = function () {
document.onmousemove = null;
}
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
