当前位置： 文江博客话题详情

如何仅在剩余的正常情况下才能将第一项大胆？

发布于 2025-01-26 14:11:52 字数 2506 浏览 3 评论 0原文

因此，我想在此打字机效果的数组中凸起第一项。 您可以在下面看到我想要的效果类型。

Judaism is <strong> A Religion </strong>
Judaism is  a culture
Judaism is  a lifestyle

其余的数组继续以普通文本的形式继续，

我首先尝试创建一个针对第一个孩子的大胆功能，但似乎我做错了，请帮助！

您可以看到我在下面到底有什么：

var pos = 0;
var turn = 0;
// change typed text here, Change main text to all caps
var data = ['A RELIGION','a Civilization','a Culture','a Relationship', 'a Discourse'];

// change the speed of the typed text here 
var speed = 200;

setTimeout(typeWriter, speed);

// this function writes the above data in the html;
function typeWriter() {
  if (pos < data[turn].length) {
    document.getElementById("write").innerHTML += data[turn].charAt(pos);
    console.log(data[turn].charAt(pos));
    pos++;
    setTimeout(typeWriter, speed);
  } else {
    setTimeout(erase, speed+100);
  }
}

function bold(){
    let html = data[i];
    if (i === 0) html = html.bold(); // 1st child
    } 

// this function erases the above data in the html;
function erase() {
    if (pos >= 0) {
      var str=data[turn].toString().substring(0, pos);
      document.getElementById("write").innerHTML = str;
      pos--;
      setTimeout(erase, speed-100);
    } else {
      turn++;
      if(turn>=data.length) 
        turn=0;
      setTimeout(typeWriter, speed);
    }
}
html{
   font-family:sans-serif;
}

header {
  height: auto;
  margin: auto;
  margin-top: 0px;
  padding: 10px 30px 10px 30px;
  background-color: #2c7991;
  color: white;
}

#lesson {
  display: inline-block;
  float: right;
  text-align: right;
  width: 50%;
  background-color: #2c7991;
}

.typewriter {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:navy;
  text-align:center;
}
 span { font-size:40px; }
.MainText { font-weight:700;border-radius:25px; }
 .type-cursor { color:#f33; animation:blink .4s ease infinite;opacity:0; }
 @keyframes blink {
    100% { opacity:1; }
 }
<section class="noTitle">
        <article>
          <div  class="typewriter">
  <span class="MainText">Judaism is </span>
  <span id="write"></span>
  <span class="type-cursor">|</span>
</div>
  </article>
       </section>

原文

so I want to bold the first Item in my array of this typewriter effect.
you can see below the type of effect I'm going for.

Judaism is <strong> A Religion </strong>
Judaism is  a culture
Judaism is  a lifestyle

and the rest of the array continues as normal text,

I first tried creating a bold function that targets the first child but it seems like I'm doing it wrong please help!

You can see what I have so far below:

var pos = 0;
var turn = 0;
// change typed text here, Change main text to all caps
var data = ['A RELIGION','a Civilization','a Culture','a Relationship', 'a Discourse'];

// change the speed of the typed text here 
var speed = 200;

setTimeout(typeWriter, speed);

// this function writes the above data in the html;
function typeWriter() {
  if (pos < data[turn].length) {
    document.getElementById("write").innerHTML += data[turn].charAt(pos);
    console.log(data[turn].charAt(pos));
    pos++;
    setTimeout(typeWriter, speed);
  } else {
    setTimeout(erase, speed+100);
  }
}

function bold(){
    let html = data[i];
    if (i === 0) html = html.bold(); // 1st child
    } 

// this function erases the above data in the html;
function erase() {
    if (pos >= 0) {
      var str=data[turn].toString().substring(0, pos);
      document.getElementById("write").innerHTML = str;
      pos--;
      setTimeout(erase, speed-100);
    } else {
      turn++;
      if(turn>=data.length) 
        turn=0;
      setTimeout(typeWriter, speed);
    }
}
html{
   font-family:sans-serif;
}

header {
  height: auto;
  margin: auto;
  margin-top: 0px;
  padding: 10px 30px 10px 30px;
  background-color: #2c7991;
  color: white;
}

#lesson {
  display: inline-block;
  float: right;
  text-align: right;
  width: 50%;
  background-color: #2c7991;
}

.typewriter {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:navy;
  text-align:center;
}
 span { font-size:40px; }
.MainText { font-weight:700;border-radius:25px; }
 .type-cursor { color:#f33; animation:blink .4s ease infinite;opacity:0; }
 @keyframes blink {
    100% { opacity:1; }
 }
<section class="noTitle">
        <article>
          <div  class="typewriter">
  <span class="MainText">Judaism is </span>
  <span id="write"></span>
  <span class="type-cursor">|</span>
</div>
  </article>
       </section>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

暮年 2025-02-02 14:11:52
var pos = 0;
var turn = 0;
// change typed text here, Change main text to all caps
var data = ['A RELIGION','a Civilization','a Culture','a Relationship', 'a Discourse'];

// change the speed of the typed text here 
var speed = 200;

setTimeout(typeWriter, speed);

// this function writes the above data in the html;
function typeWriter() {
  if (pos < data[turn].length) {
    document.getElementById("write").innerHTML += data[turn].charAt(pos);
    console.log(data[turn].charAt(pos));
    pos++;
    setTimeout(typeWriter, speed);
  } else {
    setTimeout(erase, speed+100);
  }
}

function bold(){
    let html = data[i];
    if (i === 0) html = html.bold(); // 1st child
    } 

// this function erases the above data in the html;
function erase() {
    if (pos >= 0) {
      var str=data[turn].toString().substring(0, pos);
      document.getElementById("write").innerHTML = str;
      pos--;
      setTimeout(erase, speed-100);
    } else {
      turn++;
      if(turn>=data.length) 
        turn=0;
      setTimeout(typeWriter, speed);
    }
}
html{
   font-family:sans-serif;
}

header {
  height: auto;
  margin: auto;
  margin-top: 0px;
  padding: 10px 30px 10px 30px;
  background-color: #2c7991;
  color: white;
}

#lesson {
  display: inline-block;
  float: right;
  text-align: right;
  width: 50%;
  background-color: #2c7991;
}

.typewriter {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:navy;
  text-align:center;
}
 span { font-size:40px; }
.MainText { font-weight:700;border-radius:25px; }
 .type-cursor { color:#f33; animation:blink .4s ease infinite;opacity:0; }
 @keyframes blink {
    100% { opacity:1; }
 }
<section class="noTitle">
        <article>
          <div  class="typewriter">
  <span class="MainText">Judaism is </span>
  <span id="write"></span>
  <span class="type-cursor">|</span>
</div>
  </article>
       </section> 

var pos = 0;
var turn = 0;
// change typed text here, Change main text to all caps
var data = ['A RELIGION','a Civilization','a Culture','a Relationship', 'a Discourse'];

// change the speed of the typed text here 
var speed = 200;

setTimeout(typeWriter, speed);

// this function writes the above data in the html;
function typeWriter() {
  if (pos < data[turn].length) {
    document.getElementById("write").innerHTML += data[turn].charAt(pos);
    console.log(data[turn].charAt(pos));
    pos++;
    setTimeout(typeWriter, speed);
  } else {
    setTimeout(erase, speed+100);
  }
}

function bold(){
    let html = data[i];
    if (i === 0) html = html.bold(); // 1st child
    } 

// this function erases the above data in the html;
function erase() {
    if (pos >= 0) {
      var str=data[turn].toString().substring(0, pos);
      document.getElementById("write").innerHTML = str;
      pos--;
      setTimeout(erase, speed-100);
    } else {
      turn++;
      if(turn>=data.length) 
        turn=0;
      setTimeout(typeWriter, speed);
    }
}
html{
   font-family:sans-serif;
}

header {
  height: auto;
  margin: auto;
  margin-top: 0px;
  padding: 10px 30px 10px 30px;
  background-color: #2c7991;
  color: white;
}

#lesson {
  display: inline-block;
  float: right;
  text-align: right;
  width: 50%;
  background-color: #2c7991;
}

.typewriter {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:navy;
  text-align:center;
}
 span { font-size:40px; }
.MainText { font-weight:700;border-radius:25px; }
 .type-cursor { color:#f33; animation:blink .4s ease infinite;opacity:0; }
 @keyframes blink {
    100% { opacity:1; }
 }
<section class="noTitle">
        <article>
          <div  class="typewriter">
  <span class="MainText"><p><strong>Judaism </strong>is</p></span>
  <span id="write"></span>
  <span class="type-cursor">|</span>
</div>
  </article>
       </section> 

var pos = 0;
var turn = 0;
// change typed text here, Change main text to all caps
var data = ['A RELIGION','a Civilization','a Culture','a Relationship', 'a Discourse'];

// change the speed of the typed text here 
var speed = 200;

setTimeout(typeWriter, speed);

// this function writes the above data in the html;
function typeWriter() {
  if (pos < data[turn].length) {
    document.getElementById("write").innerHTML += data[turn].charAt(pos);
    console.log(data[turn].charAt(pos));
    pos++;
    setTimeout(typeWriter, speed);
  } else {
    setTimeout(erase, speed+100);
  }
}

function bold(){
    let html = data[i];
    if (i === 0) html = html.bold(); // 1st child
    } 

// this function erases the above data in the html;
function erase() {
    if (pos >= 0) {
      var str=data[turn].toString().substring(0, pos);
      document.getElementById("write").innerHTML = str;
      pos--;
      setTimeout(erase, speed-100);
    } else {
      turn++;
      if(turn>=data.length) 
        turn=0;
      setTimeout(typeWriter, speed);
    }
}
html{
   font-family:sans-serif;
}

header {
  height: auto;
  margin: auto;
  margin-top: 0px;
  padding: 10px 30px 10px 30px;
  background-color: #2c7991;
  color: white;
}

#lesson {
  display: inline-block;
  float: right;
  text-align: right;
  width: 50%;
  background-color: #2c7991;
}

.typewriter {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:navy;
  text-align:center;
}
 span { font-size:40px; }
.MainText { font-weight:700;border-radius:25px; }
 .type-cursor { color:#f33; animation:blink .4s ease infinite;opacity:0; }
 @keyframes blink {
    100% { opacity:1; }
 }
<section class="noTitle">
        <article>
          <div  class="typewriter">
  <span class="MainText">Judaism is </span>
  <span id="write"></span>
  <span class="type-cursor">|</span>
</div>
  </article>
       </section> 

var pos = 0;
var turn = 0;
// change typed text here, Change main text to all caps
var data = ['A RELIGION','a Civilization','a Culture','a Relationship', 'a Discourse'];

// change the speed of the typed text here 
var speed = 200;

setTimeout(typeWriter, speed);

// this function writes the above data in the html;
function typeWriter() {
  if (pos < data[turn].length) {
    document.getElementById("write").innerHTML += data[turn].charAt(pos);
    console.log(data[turn].charAt(pos));
    pos++;
    setTimeout(typeWriter, speed);
  } else {
    setTimeout(erase, speed+100);
  }
}

function bold(){
    let html = data[i];
    if (i === 0) html = html.bold(); // 1st child
    } 

// this function erases the above data in the html;
function erase() {
    if (pos >= 0) {
      var str=data[turn].toString().substring(0, pos);
      document.getElementById("write").innerHTML = str;
      pos--;
      setTimeout(erase, speed-100);
    } else {
      turn++;
      if(turn>=data.length) 
        turn=0;
      setTimeout(typeWriter, speed);
    }
}
html{
   font-family:sans-serif;
}

header {
  height: auto;
  margin: auto;
  margin-top: 0px;
  padding: 10px 30px 10px 30px;
  background-color: #2c7991;
  color: white;
}

#lesson {
  display: inline-block;
  float: right;
  text-align: right;
  width: 50%;
  background-color: #2c7991;
}

.typewriter {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:navy;
  text-align:center;
}
 span { font-size:40px; }
.MainText { font-weight:700;border-radius:25px; }
 .type-cursor { color:#f33; animation:blink .4s ease infinite;opacity:0; }
 @keyframes blink {
    100% { opacity:1; }
 }
<section class="noTitle">
        <article>
          <div  class="typewriter">
  <span class="MainText"><p><strong>Judaism </strong>is</p></span>
  <span id="write"></span>
  <span class="type-cursor">|</span>
</div>
  </article>
       </section>

回复 原文
摇划花蜜的午后 2025-02-02 14:11:52

如何用强元素在HTML中大胆文本
要定义很重要的文本，请将文本放在＆lt; strong＆gt;标签中。让我们看一个例子。

这是HTML：

<p>This is some normal paragraph text, <strong>and this is some important text.</strong></p>

How to Bold Text in HTML with the Strong Element
To define text with strong importance, place the text inside <strong> tags. Let’s look at an example.

Here’s the HTML:

<p>This is some normal paragraph text, <strong>and this is some important text.</strong></p>
回复 原文
~没有更多了~

关于作者

┼──

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文