Question

我不知道这是如何工作的。在块中的某个按钮上单击“开始”后，我需要一个按钮来显示。它们出现后，我还需要它们在单击它们后消失吗？谁都知道如果您这样做，将不胜感激。这里的所有代码。

<!DOCTYPE>
<html><title>Pyramid Rounds!</title>
<body bgcolor=darkblue>
<head>
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
    .pyramid, .pyramid .row, .pyramid .row *, .pyramid .block, .pyramid 
.row1 .block, .pyramid .row2 .block, .pyramid .row3 .block, .pyramid .row4 
.block {
    z-index: 1;
    }
.pyramid {
    box-sizing: border-box;
    padding: 0px;
    width: 100%;
}
.pyramid .row:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 1;
}
.pyramid .row {
    font-size: 0px;
    text-align: center;
}
.pyramid .row * {
    font-size: 14px;
}
.pyramid .block {
    background-color: gold;
    color: black;
    text-align: center;
    display: inline-block;
    height: 54px;
    margin: 1%;
    margin-bottom: 5px;
    width: 13%;
}
.pyramid .row1 .block:first-child {
    margin-left: 0%;
}
.pyramid .row2 .block:first-child {
    margin-left: 0%;
}
.pyramid .row3 .block:first-child {
    margin-left: 0%;
}
.pyramid .row4 .block:first-child {
    margin-left: 0%;
}
</style>
</head>
<img src="pyramidimage.png">
<div class="pyramid">
<div class="row row1">
    <div class="block">1</div>
</div>
<div class="row row2">
    <div class="block">1</div>
    <div class="block">1</div>
</div>
<div class="row row3">
    <div class="block">1</div>
    <div class="block">1</div>
    <div class="block">1</div>
</div>
<div class="row row4">
    <br>
    <div class="button">Start!</div>
</div>
</div>

想知道这可能是一个函数还是某些CSS？因为它可能很容易理解（出于学习目的），所以很棒！

Answer 1

通过Javascript函数，获取div的ID，并检查样式显示并在您每次单击时进行更改。从#include "mpi.h" #include <cstdio> int main(int argc, char *argv[]) { int i, rank, size, offset; MPI_File fhw; MPI_Status status; MPI_Init(&argc, &argv); MPI_Comm_rank(MPI_COMM_WORLD, &rank); MPI_Comm_size(MPI_COMM_WORLD, &size); int N = 10; //need to be even!!! int buf[N]; for ( i = 0; i < N; ++i ) { buf[i] = rank * N + i; } offset = 10*rank; MPI_File_open(MPI_COMM_WORLD, "datafile", MPI_MODE_CREATE|MPI_MODE_WRONLY, MPI_INFO_NULL, &fhw); printf("(%d) Writing to file...\n", rank); printf("\nRank: (%d), Offset: %d\n", rank, offset); MPI_Datatype ftype,mtype; MPI_Type_vector(N/2, 2 , size*2, MPI_INT, &ftype); MPI_Type_commit(&ftype); MPI_File_set_view( fhw, rank*2*sizeof(int), MPI_INT, ftype, "native",MPI_INFO_NULL ) ; MPI_Type_contiguous(2, MPI_INT, &mtype); MPI_Type_commit(&mtype); MPI_File_write(fhw, buf, N/2, mtype, &status); MPI_File_close(&fhw); MPI_Finalize(); return 0; }到display:block，反之亦然

您可以这样做：

display:none

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

Answer 2

这是一个示例，我使用show/hide方法和类.sure{display:none;}

$("#start").click(function(){
  $('.sure').show();
})

$(".sure").click(function(){
$(this).hide();
$("#start").hide(); // if you need hide all button
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE>
<html><title>Pyramid Rounds!</title>
<body bgcolor=darkblue>
<head>
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
    .pyramid, .pyramid .row, .pyramid .row *, .pyramid .block, .pyramid 
.row1 .block, .pyramid .row2 .block, .pyramid .row3 .block, .pyramid .row4 
.block {
    z-index: 1;
    }
.pyramid {
    box-sizing: border-box;
    padding: 0px;
    width: 100%;
}
.pyramid .row:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 1;
}
.pyramid .row {
    font-size: 0px;
    text-align: center;
}
.pyramid .row * {
    font-size: 14px;
}
.pyramid .block {
    background-color: gold;
    color: black;
    text-align: center;
    display: inline-block;
    height: 54px;
    margin: 1%;
    margin-bottom: 5px;
    width: 13%;
}
.pyramid .row1 .block:first-child {
    margin-left: 0%;
}
.pyramid .row2 .block:first-child {
    margin-left: 0%;
}
.pyramid .row3 .block:first-child {
    margin-left: 0%;
}
.pyramid .row4 .block:first-child {
    margin-left: 0%;
}

.sure{
display:none;
}
</style>
</head>
<img src="pyramidimage.png">
<div class="pyramid">
<div class="row row1">
    <div class="block">1</div>
</div>
<div class="row row2">
    <div class="block">1</div>
    <div class="block">1</div>
</div>
<div class="row row3">
    <div class="block">1</div>
    <div class="block">1</div>
    <div class="block">1</div>
</div>
<div class="row row4">
    <br>
    <div class="button" id="start">Start!</div>
    <br>
    <button class="button sure">Are you sure?</button>
</div>
</div>

我如何有一个按钮出现然后消失

2 个答案: