HTML+CSS+JS实现网页随机点名

简介: HTML+CSS+JS实现网页随机点名

HTML+CSS+JS实现网页随机点名

大家好,我是小王,一个很喜欢Coding的小女孩。

很喜欢这句话:人数没有白走的路,每一步都算数,关注我,后期分享更多资源!

效果如下:

部分代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>随机点名 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }
        .box {
            width: 80vw;
            margin: 0 auto;
            background: #EFEFEF;
            position: absolute;
            /*left: 0;*/
            left: calc(50% - 40vw);
            /*水平居中*/
            top: 0;
        }
        #name {
            padding: 60px;
            font-size: 40px;
            font-weight: 900;
            text-align: center;
            background: url(images/6.jpg) no-repeat center;
            /*以盒子内的文字作为裁剪区域向外裁剪,文字之外的区域都将被裁剪掉*/
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            /*文字颜色填充*/
        }
        h1 {
            letter-spacing: 3px;
            height: 70px;
            line-height: 70px;
            background: #ccc;
            text-align: center;
            -webkit-text-stroke: 1px #000;
            /*字体描边*/
            -webkit-text-fill-color: transparent;
            /*谷歌内核特有的属性*/
        }
        #bt {
            height: 50px;
            line-height: 50px;
            background: deepskyblue;
            text-align: center;
            color: #fff;
            cursor: pointer;
        }
        #canvas {
            display: none;
        }
    </style>
</head>
<body id="bodyid">
    <canvas id="canvas"></canvas>
    <div class="box">
        <h1>金榜题名</h1>
        <div id="name">张三</div>
        <div id="bt" onclick="doit()">开始点名</div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            var canvas = $('#canvas')[0];
            canvas.width = $(window).width();
            canvas.height = $(window).height();
            var ctx = canvas.getContext('2d');
            // resize
            $(window).on('resize', function() {
                canvas.width = $(window).width();
                canvas.height = $(window).height();
                ctx.fillStyle = '#000';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            });
            // init
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            // objects
            var listFire = [];
            var listFirework = [];
            var fireNumber = 10;
            var center = {
                x: canvas.width / 2,
                y: canvas.height / 1.5
            };
            var range = 100;
            for (var i = 0; i < fireNumber; i++) {
                var fire = {
                    x: Math.random() * range / 2 - range / 4 + center.x,
                    y: Math.random() * range * 2 + canvas.height,
                    size: Math.random() + 0.5,
                    fill: '#fd1',
                    vx: Math.random() - 0.5,
                    vy: -(Math.random() + 4),
                    ax: Math.random() * 0.02 - 0.01,
                    far: Math.random() * range + (center.y - range)
                };
                fire.base = {
                    x: fire.x,
                    y: fire.y,
                    vx: fire.vx
                };
                //
                listFire.push(fire);
            }
            function randColor() {
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                var color = 'rgb($r, $g, $b)';
                color = color.replace('$r', r);
                color = color.replace('$g', g);
                color = color.replace('$b', b);
                return color;
            }
            (function loop() {
                requestAnimationFrame(loop);
                update();
                draw();
            })();
            function update() {
                for (var i = 0; i < listFire.length; i++) {
                    var fire = listFire[i];
                    //
                    if (fire.y <= fire.far) {
                        // case add firework
                        var color = randColor();
                        for (var i = 0; i < fireNumber * 5; i++) {
                            var firework = {
                                x: fire.x,
                                y: fire.y,
                                size: Math.random() + 1.5,
                                fill: color,
                                vx: Math.random() * 5 - 2.5,
                                vy: Math.random() * -5 + 1.5,
                                ay: 0.05,
                                alpha: 1,
                                life: Math.round(Math.random() * range / 2) + range / 2
                            };
                            firework.base = {
                                life: firework.life,
                                size: firework.size
                            };
                            listFirework.push(firework);
                        }
                        // reset
                        fire.y = fire.base.y;
                        fire.x = fire.base.x;
                        fire.vx = fire.base.vx;
                        fire.ax = Math.random() * 0.02 - 0.01;
                    }
                    //
                    fire.x += fire.vx;
                    fire.y += fire.vy;
                    fire.vx += fire.ax;
                }
                for (var i = listFirework.length - 1; i >= 0; i--) {
                    var firework = listFirework[i];
                    if (firework) {
                        firework.x += firework.vx;
                        firework.y += firework.vy;
                        firework.vy += firework.ay;
                        firework.alpha = firework.life / firework.base.life;
                        firework.size = firework.alpha * firework.base.size;
                        firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
                        //
                        firework.life--;
                        if (firework.life <= 0) {
                            listFirework.splice(i, 1);
                        }
                    }
                }
            }
            function draw() {
                // clear
                ctx.globalCompositeOperation = 'source-over';
                ctx.globalAlpha = 0.18;
                ctx.fillStyle = '#000';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                // re-draw
                ctx.globalCompositeOperation = 'screen';
                ctx.globalAlpha = 1;
                for (var i = 0; i < listFire.length; i++) {
                    var fire = listFire[i];
                    ctx.beginPath();
                    ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
                    ctx.closePath();
                    ctx.fillStyle = fire.fill;
                    ctx.fill();
                }
                for (var i = 0; i < listFirework.length; i++) {
                    var firework = listFirework[i];
                    ctx.globalAlpha = firework.alpha;
                    ctx.beginPath();
                    ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
                    ctx.closePath();
                    ctx.fillStyle = firework.fill;
                    ctx.fill();
                }
            }
        });
        //点名事件
        var id = document.getElementById('canvas');
        var namelist = ["李四", "王五", "二二", "一一", "三三"];
        var mytime = null;
        function doit() {
            var bt = document.getElementById("bt");
            if (mytime == null) {
                bt.innerHTML = "停止点名";
                bt.style.background = 'palevioletred';
                id.style.display = 'none'
                    //随机点名
                show(); //定义一个方法
            } else {
                bt.innerHTML = "开始点名";
                bt.style.background = "deepskyblue";
                clearTimeout(mytime);
                mytime = null;
                id.style.display = 'block'
            }
        }
        /*Math.floor 向下取整(-16.2就为-17),去除小数*/
        function show() {
            var name = document.getElementById("name");
            var num = Math.floor(Math.random() * namelist.length);
            name.innerHTML = namelist[num];
            mytime = setTimeout(show, 80);
        }
    </script>
</body>
</html>


相关文章
|
2天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
17 1
[HTML、CSS]细节与使用经验
|
4天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
14 1
[HTML、CSS]知识点
|
4天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
3天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
11 4
|
4天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
2天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
12 0
html5+three.js公路开车小游戏源码
|
10天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
54 6
|
9天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
9天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。