js+css實現(xiàn)打字效果

更新時間：2020年06月24日 10:09:47 作者：冷月葬殘花

這篇文章主要為大家詳細介紹了js+css打字效果的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)打字效果的具體代碼，供大家參考，具體內容如下

1.效果

2.源碼

<html>
<head>
 <style type="text/css">
 #myDiv{
  display: inline-block;
  width:500px;
  height:300px;
  background-color:rgba(0,0,0,0.3);
  color:hsla(0,100%,70%,1);
  word-wrap:break-word;
  line-height:30px;
  letter-spacing:3px;
  padding-left:3px;
  text-indent:40px;
  border-radius:5px;
  -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
 }
 </style>
 <script type="text/javascript">
 window.onload = function () {
  var myDiv = document.getElementById("myDiv");
  var contentArr = "秋天來臨了天空像一塊覆蓋大地的藍寶石。村外那個小池塘睜著碧澄澄的眼睛，凝望著這美好的天色。一對小白鵝側著腦袋欣賞自己映在水里的影子。山谷里楓樹的葉子，不知是否喝了過量的酒，紅的像一團火似的。村前村后的稻子，低著頭彎著腰，在秋風中默默地等待著人們去收割，半空中，排著“人”字形的雁群，高興的唱著歌，告別人們，向天邊慢慢飛去……".split("");
  var content = "";
  var index = 0;
  var ID = setInterval(function () {
  content += contentArr[index];
  myDiv.innerHTML = content + "_";
  index++;
  if(index === contentArr.length){
   myDiv.innerHTML = content ;
   clearInterval(ID);
   console.log("結束了");
  }
  },100);
 }
 </script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: