V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xFrank
V2EX  ›  前端开发

新手求助一个简单的 CSS 显示数字问题

  •  
  •   xFrank · 2018-01-14 13:04:41 +08:00 · 1871 次点击
    这是一个创建于 2265 天前的主题,其中的信息可能已经有所发展或是发生改变。

    背景:在写一个简单的网页五子棋游戏 目前实现(网上找的代码): css 部分 有这三个元素:

       .chess{
            position:relative;
            z-index:99999;
            width:28px;
            height:28px;
            border-radius:50%;
            background-color:#ffdd55;
            opacity:0.3;
            margin:0 2px 2px 0;
            float:left;
        }
        .white{
            opacity:1;
            background-color:#fff;
            box-shadow:1px 1px 3px #000;
        }
        .black{
            opacity:1;
            background-color:#000;
            box-shadow:1px 1px 3px #000;
        }
    

    js 部分: 初始化的时候,所有的棋子都是:className='chess'; 然后 id 和坐标绑定 点击的时候,就可以根据坐标获取到 id,然后设置棋子的 className 为黑棋或白棋,函数类似这样:

    this.showChess = function (i, j, color) {
        console.log("in showChess: i="+i+",j="+j+", color="+color);
        id="#chess"+i+"_"+j;
        chess = document.querySelector(id);
        chess.className='chess '+color;
    }  
    

    问题: 现在希望增加一个步数显示功能,即在每个棋子上依次显示从 1 开始的数字。 js 函数类似这样(多了一个 count ):

    this.showChess = function (i, j, color,count) {
        console.log("in showChess: i="+i+",j="+j+", color="+color);
        id="#chess"+i+"_"+j;
        chess = document.querySelector(id);
        chess.className='chess '+color + ' ' +count;
    }
    

    css 部分完全不知道怎么搞了,求助

    7 条回复    2018-01-14 15:46:39 +08:00
    lhx2008
        1
    lhx2008  
       2018-01-14 13:12:02 +08:00 via Android
    最简单的方法:在 html 里面预留一个标签来放数字,用 js 操作 dom 插入数字。
    rabbbit
        2
    rabbbit  
       2018-01-14 13:39:13 +08:00
    没太看懂,是不知道怎么用 CSS 显示数字到棋子上吗,还是不知道怎么获取数字?
    codermagefox
        3
    codermagefox  
       2018-01-14 14:37:53 +08:00
    我能不能理解为楼主不知道怎么在 CSS 里显示出一个动态的数字?自己搜 context
    xFrank
        4
    xFrank  
    OP
       2018-01-14 15:10:49 +08:00
    @lhx2008 可以做到这些新的标签和原有的 chess 上下重叠?
    能说下具体怎么做吗?
    xFrank
        5
    xFrank  
    OP
       2018-01-14 15:11:59 +08:00
    @codermagefox 没搜到 context,搜到了一些 content 的内容,但是试了下,没有效果。。。
    我在 js 后面加了这么一句,没有任何数字显示出来:
    chess.style.content=count.toString();
    rabbbit
        6
    rabbbit  
       2018-01-14 15:24:41 +08:00   ❤️ 1
    你的棋子是<div>吗?直接在里面插个数字就行了啊.
    如果想可以隐藏就套个<span>,或者改字体颜色.
    chess.innerHTML = '<span>1</span>';
    xFrank
        7
    xFrank  
    OP
       2018-01-14 15:46:39 +08:00
    @rabbbit
    这个最简单!
    问题已经解决了
    多谢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1227 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 18:08 · PVG 02:08 · LAX 11:08 · JFK 14:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.