Question

上面是我尝试这个的地方的链接......

下面是代码：

select distinct b.instrumentnaam
from bezettingsregel b 
  inner join stuk s 
    on b.stuknr = s.stuknr
where s.genrenaam = 'klassiek'
 and b.instrumentnaam not in (
  select instrumentnaam
  from stuk nes
    inner join bezettingsregel neb 
      on neb.stuknr = nes.stuknr
  where nes.genrenaam = 'jazz'
  )

function typeAp(target, toType, stepTime){
  var n = 0;
  var chars = Array.from(toType);
  setInterval(function(){
     $(target).append(chars[n]);
      n++; 
    
  },stepTime);
};

typeAp('.init',"initializing",100);

body{
    background-color:#ccc;
}
.container{
  display:flex;
  width:100%;
  height:100vh;
  justify-content:center;
  align-items:center;
}
.cmd{
  background-color:#111;
  border-radius:5px;
  padding:20px;
  
  width:600px;
  height:200px;
}
p{
  letter-spacing:2px;
  white-space: nowrap;
  overflow: hidden;
  font-family:courier;
  color:lime;
}
::selection{
    background:#111;
  }

我想在每个字符后添加闪烁的“_”，以便它看起来像是键入的文本，感觉就像命令行。

如果您愿意，建议我可以添加到此代码中的任何错误或额外内容。

Answer 1

这是一个纯粹的jQuery解决方案，但它也可以通过css完成。

我在callback function添加了typeAp，然后插入“_”并使其闪烁。

这会在完成写入时触发回调。

if (n == chars.length) {
    callback(target)
}

function typeAp(target, toType, stepTime, callback) {
  var n = 0;
  var chars = Array.from(toType);
  setInterval(function() {
    $(target).append(chars[n]);
    n++;
    if (n == chars.length) {
      callback(target)
    }
  }, stepTime);

};

typeAp('.init', "initializing", 100, function(target) {
  $(target).append("<span class='blink'>_</span>")

  function blinker() {
    $('.blink').fadeOut(500);
    $('.blink').fadeIn(500);
  }

  setInterval(blinker, 1000);
});

body {
  background-color: #ccc;
}

.container {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.cmd {
  background-color: #111;
  border-radius: 5px;
  padding: 20px;
  width: 600px;
  height: 200px;
}

p {
  letter-spacing: 2px;
  white-space: nowrap;
  overflow: hidden;
  font-family: courier;
  color: lime;
}

::selection {
  background: #111;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container">
    <div class="cmd">
      <p class="init">$Robot~ </p>
      <p class="perc"> </p>
    </div>
  </div>
</body>

Answer 2

您可以使用pseudoelement和简单动画：

.init::after {
  content: '_';
  display: inline-block;
  animation: flash 1s linear infinite;
}

@keyframes flash {
  50% {
    opacity: 0;
  }
}

codepen

Answer 3

将光标添加到HTML：

body
  .container
    .cmd
      p.init
        span.prompt $Robot~ 
        span.cursor _
      p.perc

设置光标样式：

.cursor {
  animation: blink 1s linear infinite;
}

@keyframes blink {  
  50% { opacity: 0; }
}

更改JS以定位新的span：

typeAp('.prompt',"initializing",100);

Answer 4

添加到样式

  .init::after {
  content: '_';
  animation: blink 0.2s linear infinite;
  }

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opaicty: 1;
  }
}

Answer 5

jQuery的可能解决方案：

function typeAp(target, toType, stepTime){
  $('.dash').hide();
  var n = 0;
  var chars = Array.from(toType);
  var interval = setInterval(function(){
    $(target).append(chars[n]);
    n++;
    if (n >= chars.length) {
      clearInterval(interval);
      $('.dash').show();
    }
  },stepTime);
};

setInterval(function() {
  $('.dash').toggleClass('hide');
}, 700);

typeAp('.text',"initializing",100);

body{
    background-color:#ccc;
}
.container{
  display:flex;
  width:100%;
  height:100vh;
  justify-content:center;
  align-items:center;
}
.cmd{
  background-color:#111;
  border-radius:5px;
  padding:20px;
  
  width:600px;
  height:200px;
}
p{
  letter-spacing:2px;
  white-space: nowrap;
  overflow: hidden;
  font-family:courier;
  color:lime;
}
.dash.hide {
  opacity: 0;
}
::selection{
    background:#111;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="container">
    <div class="cmd">
      <p>
        $Robot~ <span class="text"></span><span class="dash">_</span>
      </p>
    </div>
  </div>
</body>

Answer 6

使用CSS和伪元素:after

function typeAp(target, toType, stepTime){
  target = $(target).addClass('typing');
  var n = 0;
  var chars = Array.from(toType);
  var interval = setInterval(function(){
    target.append(chars[n]);
    n++;
    if (n >= chars.length) {
      clearInterval(interval);
      target.removeClass('typing');
    }
  },stepTime);
};

typeAp('.init', "initializing", 100);

body{
    background-color:#ccc;
}
.container{
  display:flex;
  width:100%;
  height:100vh;
  justify-content:center;
  align-items:center;
}
.cmd{
  background-color:#111;
  border-radius:5px;
  padding:20px;
  
  width:600px;
  height:200px;
}
p{
  letter-spacing:2px;
  white-space: nowrap;
  overflow: hidden;
  font-family:courier;
  color:lime;
}
.init:not(.typing)::after {
  content: '_';
  animation: blink 1s ease .5s infinite;
  opacity: 0;
}
@keyframes blink {
  50% {
    opacity: 1;
  }
}
::selection{
  background:#111;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="container">
    <div class="cmd">
      <p class="init">$Robot~ </p>
      <p class="perc"> </p>
    </div>
  </div>
</body>

如何在每个角色后添加闪烁的“_”？

6 个答案: