javascript 的index.html

Posted 2021-05-03

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 的index.html相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>pick-one</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <div class="container-fluid mt-3">
        <div class="btn-toolbar mb-3">
            <div class="btn-group mr-2">
                <button type="submit" class="btn btn-primary" id="pick">Pick One</button>
            </div>
            <ul class="list-group list-group-horizontal" id="set"></ul>
        </div>
        <div class="card">
            <div class="card-body">
                <h1 id="result"></h1>
            </div>
        </div>
    </div>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="main.js"></script>
</body>

</html>


let set = location.hash.substr(1).split('&');

d3.select('#set').selectAll('li').data(set)
    .enter().append('li').classed('list-group-item', true).text(d => d);

d3.select('#pick').on('click', () => {
    let index = Math.floor(Math.random() * set.length);
    d3.select('#result').text(set[index])
        .style('opacity', 0).transition().duration(500)
        .style('opacity', 1);
});

以上是关于javascript 的index.html的主要内容，如果未能解决你的问题，请参考以下文章

javascript 的index.html