动态生成圆桌座椅兼容ie/chrome

最新推荐文章于 2024-07-15 14:11:16 发布
最新推荐文章于 2024-07-15 14:11:16 发布
阅读量349 收藏
点赞数
分类专栏： js手写插件 ie兼容 html5 文章标签： javascript css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_39274378/article/details/115903267
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .container{
        width: 100%;
        height: 100%;
        display: flex;
    }
    #circleDesk {
        position: relative;
        top: 100px;
        left: 100px;
    }

    #circleDesk .circleSeat {
        position: absolute;
        background: transparent url("./confSeat.png") no-repeat 0 0 / 100% 100%;
        color: #000;
        text-align: center;
        font-size: 12px;
        border: 1px solid red;
    }
    #circleDesk .circleSeat .seatNum{
        display: flex;
        justify-content: center;
        align-items: center;
        color: #000;
        width: 40px;
        height: 40px;
        border: 1px solid green;
    }
    #circleDesk .centerDesk {
        background: transparent url("./confDeskCircle.png") no-repeat 0 0 / 100% 100%;
        width: 500px;
        height: 500px;
        border-radius: 500px;
        position: relative;
    }

</style>
<div class="container">
    <div id="circleDesk">
        <div  class="deskBox">
            <!--
                圆心
                半径 iR = 50px;
                圆心坐标(150,150)
            -->
            <div class="centerDesk"></div>
            <!--
                ==========================
                最大菜单块(正方形)
                对角线长度 mDLen = oR - iR;
                边长 mWidth = mHeight = mDLen的平方 / 2 的结果 再开方 最后取整
                ==========================
                菜单块滑动圆
                半径 mR = iR + (mDLen / 2)
                ==========================
            -->
            <div id="C1" class="circleSeat" >
                <span>张三1</span>
                <span id="CN1" class="seatNum">1</span>
            </div>
            <div id="C2" class="circleSeat" >
                <span>张三2</span>
                <span id="CN2" class="seatNum">2</span>
            </div>
            <div id="C3" class="circleSeat" >
                <span>张三2</span>
                <span id="CN3" class="seatNum">3</span>
            </div>
            <div id="C4" class="circleSeat" >
                <span>张三3</span>
                <span id="CN4" class="seatNum">4</span>
            </div>
            <div id="C5" class="circleSeat" >
                <span>张三3</span>
                <span id="CN5" class="seatNum">5</span>
            </div>
            <div id="C6" class="circleSeat" >
                <span>张三3</span>
                <span id="CN6" class="seatNum">6</span>
            </div>
            <div id="C7" class="circleSeat" >
                <span>张三3</span>
                <span id="CN7" class="seatNum">7</span>
            </div>
            <div id="C8" class="circleSeat" >
                <span>张三3</span>
                <span id="CN8" class="seatNum">8</span>
            </div>
            <div id="C9" class="circleSeat" >
                <span>张三3</span>
                <span id="CN9" class="seatNum">9</span>
            </div>
            <div id="C10" class="circleSeat" >
                <span>张三3</span>
                <span id="CN10" class="seatNum">10</span>
            </div>
            <div id="C11" class="circleSeat" >
                <span>张三3</span>
                <span id="CN11" class="seatNum">11</span>
            </div>
            <div id="C12" class="circleSeat" >
                <span>张三3</span>
                <span id="CN12" class="seatNum">12</span>
            </div>
            <div id="C13" class="circleSeat" >
                <span>张三13</span>
                <span id="CN13" class="seatNum">13</span>
            </div>
            <div id="C14" class="circleSeat" >
                <span>张三13</span>
                <span id="CN14" class="seatNum">14</span>
            </div>
            <div id="C15" class="circleSeat" >
                <span>张三13</span>
                <span id="CN15" class="seatNum">15</span>
            </div>
            <div id="C16" class="circleSeat" >
                <span>张三16</span>
                <span id="CN16" class="seatNum">16</span>
            </div>
            <div id="C17" class="circleSeat" >
                <span>张三17</span>
                <span id="CN17" class="seatNum">17</span>
            </div>
            <div id="C18" class="circleSeat" >
                <span>张三18</span>
                <span id="CN18" class="seatNum">18</span>
            </div>
            <div id="C19" class="circleSeat" >
                <span>张三19</span>
                <span id="CN19" class="seatNum">19</span>
            </div>
            <div id="C20" class="circleSeat" >
                <span>张三13</span>
                <span id="CN20" class="seatNum">20</span>
            </div>
            <div id="C21" class="circleSeat" >
                <span>张三21</span>
                <span id="CN21" class="seatNum">21</span>
            </div>
            <div id="C22" class="circleSeat" >
                <span>张三22</span>
                <span id="CN22" class="seatNum">22</span>
            </div>
            <div id="C23" class="circleSeat" >
                <span>张三23</span>
                <span id="CN23" class="seatNum">23</span>
            </div>
            <div id="C24" class="circleSeat" >
                <span>张三24</span>
                <span id="CN24" class="seatNum">24</span>
            </div>
            <div id="C25" class="circleSeat" >
                <span>张三25</span>
                <span id="CN25" class="seatNum">25</span>
            </div>

        </div>
    </div>
</div>

<script src="../../src/jquery-1.11.3.js"></script>
<script>
    
    drawCircleDesk(25);
    drawCircleDeskNum(25);
    function drawCircleDesk(num) {
        var cW=parseInt($(".centerDesk").width());
        var cH=parseInt($(".centerDesk").height());

        var dL=$(".centerDesk").offset().left;
        var dT=$('.centerDesk').offset().top;
        console.log('dL',dL,'dT',dT);
        var mWidth = 40;//座位大小

        var irx = cW/2; //中间圆的半径
        var iry= cH/2;
        var orx = irx+mWidth;//最外层圆的半径,决定座位与中间圆的紧密程度，圆环的宽度
        var ory=iry+mWidth;
        var osx=dL+irx-mWidth/2;   //决定座位相对中间圆的位置
        var osy=dT+iry-mWidth/2;   //决定座位相对中间圆的位置

        $("#circleDesk .circleSeat").width(mWidth);
        $("#circleDesk .circleSeat").height(mWidth);
        //绘制圆形座位
        for(var i=0;i<num;i++){
            var Cx=parseInt( -(Math.cos( (270-(360/num)*i) * Math.PI/180 ) * (orx + irx )/2) + osx  );
            var Cy=parseInt( (Math.sin( (270-(360/num)*i) * Math.PI/180 ) * (ory + iry )/2) + osy  );
            var ii=i+1;
            $("#C"+ii).offset( {top:Cy,left:Cx} );
        }
    }
    function drawCircleDeskNum(num) {
        var cW=parseInt($(".centerDesk").width());
        var cH=parseInt($(".centerDesk").height());

        var dL=$(".centerDesk").offset().left;
        var dT=$('.centerDesk').offset().top;
        console.log('dL',dL,'dT',dT);
        var mWidth = 40;//座位大小

        var irx = cW/2; //中间圆的半径
        var iry= cH/2;
        var orx = irx-mWidth*2;//最外层圆的半径,决定座位与中间圆的紧密程度，圆环的宽度
        var ory=iry-mWidth*2;
        var osx=dL+irx-mWidth/2;   //决定座位相对中间圆的位置
        var osy=dT+iry-mWidth/2;   //决定座位相对中间圆的位置


        //绘制圆形座位
        for(var i=0;i<num;i++){
            var Cx=parseInt( -(Math.cos( (270-(360/num)*i) * Math.PI/180 ) * (orx + irx )/2) + osx  );
            var Cy=parseInt( (Math.sin( (270-(360/num)*i) * Math.PI/180 ) * (ory + iry )/2) + osy  );
            var ii=i+1;

            $("#CN"+ii).offset( {top:Cy,left:Cx} );
        }
    }
</script>
</body>
</html>

完整demo可下载:https://download.csdn.net/download/github_39274378/16771823

或见github:https://github.com/nhclike/web-test-demo

github_39274378
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
婚宴座位图html5,20桌婚宴座位安排图(婚宴座位顺序如何安排？)
weixin_28749363的博客
06-25 1387
酒席上如何安排座次这个可分为正式的大型和分正式的小型宴会：正式或大型宴会：正式或大型宴会一般都排席位，也可只排部分客人席位，其他人员只排桌次或自由入座。1、宴会席位主要是根据出席人员礼宾次序安排的，同时还要综合考虑政治关系、语言使用、宗教信仰和专业等诸因素。2、同一桌上，席位的高低以离主人的座位远近而定，右高左低。3、两桌以上的宴会，其他各桌第一主人的位置可以与主桌主人位置同向，也可以面对主桌的位...
C/C++编程题之圆桌游戏
ykc的专栏
12-04 2827
n个人围坐在一个圆桌上从1到n编号，顺时针从第一个人开始报数，从1开始报到m(m &lt; n)，报到m的那个人出圆桌，再从出桌的人的下一个人从1开始报数，直到圆桌上的人不足m人位置，输出最终剩下人的编号。bool RoundTable(int n,int m,list&lt;int&gt;&amp; personList) { personList.swap(list&lt;int&gt;()...
html中自动随机点名的程序,html座位表,随机点名
weixin_39530838的博客
05-31 304
html>点名td{width:9.09%;height:50px;text-align:center;}.tdBg{background-color:pink;}vartimer=null;//这是一个函数，表示一个功能functionstart(){timer=setInterval(function(){//alert("要开始了！");//console...
使用js实现选座
m0_46577631的博客
07-03 1582
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选座位</title> <style> ul { displ
售票—根据班次的信息对座位进行处理
weixin_44554896的博客
07-27 366
开发工具与关键技术：Visual Studio 2015 作者：孙水兵 撰写时间：2019年7月27 一、 需要达到的目的 根据该班次所在的车辆信息中的座位数进行动态生成座位。并且根据该座位是否已经售票生成不同颜色的座位号。 二、 涉及到的主要表格 完成座位主要需要获取到的数据有车型表中的座位数和车辆表中的加座数。因此在根据发车站和到达站查询班次的时候需要连接车辆表和车型表查询出该班次总共...
动态绘制圆桌座椅并且旋转座椅角度(chrome)
github_39274378的博客
04-20 342
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> .container{ width: 100%; height: 100%; display: flex; .
【圆桌论坛】个人作为嘉宾参与问答环节的总结，Create 2024百度AI开发者大会之AI智能体开发与应用论坛
小5聊的博客
04-23 4221
首先，非常荣幸和开心作为开发者和创业者代表参加百度Create AI大会分论坛圆桌论坛的问答环节。 在分论坛活动开始前，参加了文心智能体平台（之前叫灵镜矩阵）的首届智能体创意大赛， 很幸运获得了第一期的Top 5，也深深体会到《人人都可以是智能体的开发者》，只要你有创意就能被看见。
算法学习001-圆桌问题 中小学算法思维学习 信奥算法解析 c++实现
青少年编程学习指导
04-25 1046
算法学习001-圆桌问题 一、题目要求 1、编程实现 圆桌边围坐着2n个人，其中n个人是好人，另外n个人是坏人。从第一个人开始数，数到第m个人，立即赶走该人；然后从被赶走的人之后开始数，再将数到的第m个人赶走，依此方法不断赶走围坐在圆桌边的人 预先应该如何安排这些好人与坏人的座位，才能使得在赶走n个人之后圆桌边围坐的剩余的n个人全是好人 2、输入输出 输入描述：多组数据，每组数据输入：n,m
wu-lun.rar_圆桌评卷模型
07-13
"圆桌评卷模型"是一种在数学建模竞赛中用于高效、公正评审试卷的方法。它借鉴了圆桌会议的理念，确保每个参赛作品都能得到平等、全面的评价。在这个模型中，评委们围坐成一圈，每份论文都会依次传递到每位评委手中...
以圆桌骑士为例浅尝HTML5游戏开发
03-02
随着XHTML的逐渐式微，Chrome，Safari，FireFox，Opera等现代浏览器正在积极完善HTML5实现，IE9也加入到标准的行列并将在今年上半年发布正式版，HTML5时代来临了。在各种HTML5特性中，最吸引人的莫过于canvas标签，...
动态圆桌M文件
05-01
对2014年全国数学建模竞赛第二题的代码画出的动态图
DXF纯图色脚本源码-支持未央,支持圆桌,支持白图
01-16
《DXF纯图色脚本源码：未央、圆桌与白图的支持解析》 在IT领域，尤其是在图形处理和设计行业中，DXF（Drawing Exchange Format）是一种广泛使用的文件格式，用于交换CAD（计算机辅助设计）数据。本文将深入探讨一款...
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 385
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 179
vue 自定义滚动条同步拖动（移动端）
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
最新发布
weixin_73582152的博客
07-15 231
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 693
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 204
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 491
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
使用循环队列描述圆桌会议
05-01
假设有 $n$ 个人参加圆桌会议，我们可以使用循环队列来描述这个过程。具体来说，我们可以使用一个长度为 $n$ 的数组 $q$ 来表示循环队列，$q[i]$ 表示第 $i$ 个人的编号。 开始时，我们可以将所有人的编号依次插入到循环队列中，即 $q[i]=i$。然后，我们可以使用一个指针 $p$ 来表示当前正在进行发言的人的位置。初始时，$p$ 可以指向任意一个位置。 在圆桌会议中，每个人都有机会发言，因此我们可以将 $p$ 按照某种规则不断循环遍历整个循环队列，直到所有人都发言为止。具体来说，我们可以按照以下步骤进行： 1. 当前发言者发言完毕后，将 $p$ 向前移动一位，即 $p=(p+1)\%n$。 2. 如果当前发言者是最后一个人，那么下一个发言者应该是第一个人，因此将 $p$ 设置为 $0$。 3. 如果当前发言者发言后需要离开会议，我们可以将他从循环队列中删除，并将 $p$ 按照上述方式更新。 使用循环队列可以方便地模拟圆桌会议的过程，同时也可以避免数组越界的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值