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

2018-01-14 13:04:41 +08:00
 xFrank

背景:在写一个简单的网页五子棋游戏 目前实现(网上找的代码): 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 部分完全不知道怎么搞了,求助

1981 次点击
所在节点    前端开发
7 条回复
lhx2008
2018-01-14 13:12:02 +08:00
最简单的方法:在 html 里面预留一个标签来放数字,用 js 操作 dom 插入数字。
rabbbit
2018-01-14 13:39:13 +08:00
没太看懂,是不知道怎么用 CSS 显示数字到棋子上吗,还是不知道怎么获取数字?
codermagefox
2018-01-14 14:37:53 +08:00
我能不能理解为楼主不知道怎么在 CSS 里显示出一个动态的数字?自己搜 context
xFrank
2018-01-14 15:10:49 +08:00
@lhx2008 可以做到这些新的标签和原有的 chess 上下重叠?
能说下具体怎么做吗?
xFrank
2018-01-14 15:11:59 +08:00
@codermagefox 没搜到 context,搜到了一些 content 的内容,但是试了下,没有效果。。。
我在 js 后面加了这么一句,没有任何数字显示出来:
chess.style.content=count.toString();
rabbbit
2018-01-14 15:24:41 +08:00
你的棋子是<div>吗?直接在里面插个数字就行了啊.
如果想可以隐藏就套个<span>,或者改字体颜色.
chess.innerHTML = '<span>1</span>';
xFrank
2018-01-14 15:46:39 +08:00
@rabbbit
这个最简单!
问题已经解决了
多谢。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/422776

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX