目錄

前言

?名言生成器

頁(yè)面搭建

功能實(shí)現(xiàn)

前言

????????今天呢我們來給大家展示的，就是一個(gè)非常非常簡(jiǎn)單的名言生成器， 那么它的功能的非常簡(jiǎn)單，就是我們通過點(diǎn)擊按鈕，然后可以生成名人名言，然后我們也可以點(diǎn)擊按鈕將它分享到我們csdn的Blink當(dāng)中。

?名言生成器

????????上面的圖片就是我們今天要完成的小demo，功能不復(fù)雜，就是我們通過點(diǎn)擊生成名言的按鈕，然后就會(huì)在上面去展示我們生成的名言，會(huì)有名言跟作者的展示，那我們?cè)俅吸c(diǎn)擊會(huì)切換新的名言，我們可以復(fù)制這段名言然后點(diǎn)擊右下角的分享到CSDN&BLink按鈕，然后就會(huì)跳轉(zhuǎn)到我們的站內(nèi)Blink發(fā)布頁(yè)面我們粘貼就可以發(fā)布動(dòng)態(tài)了；我們先一步步來吧，首先肯定是要先搭建我們的頁(yè)面樣式；

頁(yè)面搭建

創(chuàng)建文件

????????首先呢我們創(chuàng)建我們的HTML文件，這里我就直接命名為 名言生成器.html 了，大家可以隨意命名， 文件創(chuàng)建生成后我們通過編輯器打開，這里我用的是HbuilderX。

搭建DOM結(jié)構(gòu)

?然后我們可以對(duì)照我們的效果圖可以開始搭建我們的DOM元素了，首先來說我們肯定中間大的卡片是一個(gè)div盒子，所以我們先創(chuàng)建一個(gè)這樣的盒子給他設(shè)置類名為 quote-box ，然后我們能夠看到我們?cè)诤凶又杏幸粋€(gè)用來展示名言的還有一行是展示作者的，那我們用兩個(gè)p標(biāo)簽來放著兩塊的內(nèi)容，我們?yōu)槌休d名言的p標(biāo)簽設(shè)置類名為 text ，為承載作者的p標(biāo)簽設(shè)置類名為 author ，我們下面呢有一個(gè)按鈕，我們就添加一個(gè)按鈕，稍后我們會(huì)在js中處理按鈕的點(diǎn)擊事件，為了稍后更好的獲取，所以我們?cè)谶@里先為按鈕設(shè)置id為 new-quote（這里可以用類名么？當(dāng)然可以，但是這個(gè)地方推薦大家使用id因?yàn)槲覀兩院笠獟燧d點(diǎn)擊事件，類名是可以重復(fù)的，id是唯一的，所以我們一旦涉及到比如事件綁定這種只為特定的元素設(shè)置的話我們盡量使用id），最后呢在右下角有一個(gè)跳轉(zhuǎn)Blink的元素，這里我們是用a標(biāo)簽即可設(shè)置類名為tweet-quote ；那我們就搭建好了我們的Dom結(jié)構(gòu)。
?

<div class="quote-box">
    <p class="text">這是文言部分</p>
    <p class="author">我是作者</p>
    <button id="new-quote">生成名言</button>
    <a class="tweet-quote" >分享到 CSDN&Blink</a>
  </div>

為DOM設(shè)置樣式

在head標(biāo)簽中先寫上我們的style標(biāo)簽，我們先來為大盒子quote-box設(shè)置，寬度為500px，通過margin設(shè)置外邊距上下為100px然后左右居中也就是auto值，內(nèi)邊距padding我們?cè)O(shè)置為30px，我們卡片還有圓角，我們通過border-radius設(shè)置為5px，我們發(fā)現(xiàn)卡片中還要有陰影，所以我們還要為盒子設(shè)置box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);box-shadow就是設(shè)置邊框陰影的，幾個(gè)值的含義分別是：第一個(gè)長(zhǎng)度值指明了陰影水平方向的偏移；第二個(gè)長(zhǎng)度值指明了陰影豎直方向的偏移；第三個(gè)長(zhǎng)度值代表了陰影的模糊半徑；第四個(gè)也是最后一個(gè)長(zhǎng)度值代表了陰影的大小。我們保存代碼查看效果吧！
?

.quote-box {
  width: 500px;
  margin: 100px auto;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
}

內(nèi)部元素樣式設(shè)置

然后我們就開始盒子內(nèi)部的布局了，首先我們?yōu)閕d為text的p標(biāo)簽設(shè)置fontsize字體大小為24px，然后設(shè)置文字傾斜我們通過font-style設(shè)置傾斜，然后通過margin-bottom設(shè)置外邊距距離下面20px，我們?cè)跒閍uthor盒子設(shè)置字體大小18px，然后我們看到效果圖上我們要讓作者的名字在右側(cè)，所以這里我們?cè)O(shè)置文字靠右對(duì)齊；我們保存代碼刷新看一下效果。
?

.text {
  font-size: 24px;
  font-style: italic;
  margin-bottom: 20px;
}

.author {
  font-size: 18px;
  text-align: right;
}

我們文字部分搞定了，然后就是我們下面的按鈕和跳轉(zhuǎn)的a標(biāo)簽，首先我們?yōu)榘粹o設(shè)置背景顏色為綠色，文字顏色設(shè)置為白色，然后邊框取消，內(nèi)邊距設(shè)置上下為 10px 左右為 20px，按鈕距離上面盒子20px，然后按鈕圓角為5px ，最后一個(gè)屬性 cursor: pointer; 是設(shè)置我們鼠標(biāo)懸浮到按鈕上的樣式，這里是手狀，我們還可以設(shè)置其他的比如圓圈、箭頭等，然后我們?cè)谠O(shè)置我們a標(biāo)簽的樣式，首先我們通過display: block;來把a(bǔ)標(biāo)簽設(shè)置為塊元素，這里是為了讓a標(biāo)簽獨(dú)占一行，然后設(shè)置我們的文字對(duì)齊方式為右側(cè)對(duì)齊，距離上面10px，然后設(shè)置顏色為綠色；我們保存代碼看一下效果！
?

#new-quote {
  background-color: #4CAF50;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin-top: 20px;
  border-radius: 5px;
  cursor: pointer;
}

.tweet-quote {
  display: block;
  text-align: right;
  margin-top: 10px;
  color: #4CAF50;
}

截止到這里呢我們的DOM結(jié)構(gòu)跟CSS樣式就搭建好了，也就是我們的HTML、CSS部分已經(jīng)實(shí)現(xiàn)了，下面呢我們就開始實(shí)現(xiàn)我們的功能部分了，也就是我們js中的代碼。?

功能實(shí)現(xiàn)

為按鈕設(shè)立點(diǎn)擊事件

我們要為按鈕注冊(cè)上點(diǎn)擊事件首先來說呢，我們要獲取到按鈕，那如何獲取呢？我們來看下面的代碼就是用來獲取我們dom元素，我們不僅可以去獲取按鈕，就是在我們body當(dāng)中的任何元素都可以在JS中獲取，當(dāng)然我們可以根據(jù)標(biāo)簽的名稱、類名、id來獲取，這里我們先來看我們的按鈕我們添加的是id屬性，所以我們通過ID來獲?。幌旅娲a就是我通過document.querySelector("#new-quote")來獲取到按鈕元素，然后通過addEventListener方法來綁定事件，這里的click就是點(diǎn)擊事件，然后我們第二個(gè)參數(shù)是一個(gè)function就是我們點(diǎn)擊要觸發(fā)的函數(shù)。我們來看一下效果
?

document.querySelector("#new-quote").addEventListener("click", function(){
  console.log('這里是點(diǎn)擊了按鈕')
});

添加名言集合

根據(jù)我們的需求是不是要更新我們上面的名言內(nèi)容呀，那我們的名言在哪里呢？當(dāng)然我們可以通過鏈接去獲取，或者調(diào)用接口都可以，這里呢我就用了最簡(jiǎn)單的方式，我自己創(chuàng)建一些是不是就可以了；下面就是我創(chuàng)建的名言數(shù)組，大家可以復(fù)制過去；

let quotes = [
  {
    quote: "生命不止，奮斗不息。",
    author: "方志敏"
  },
  {
    quote: "知識(shí)就是力量。",
    author: "李約瑟"
  },
  {
    quote: "先苦后甜，后苦變甜；先甜后苦，后甜變苦。",
    author: "林語(yǔ)堂"
  },
  {
    quote: "成功是一份耕耘，而非一次得手。",
    author: "賈平凹"
  },
  {
    quote: "寶劍鋒從磨礪出，梅花香自苦寒來。",
    author: "陸游"
  },
  {
    quote: "寶劍不磨，其鋒不利；人不學(xué)習(xí)，其智不明。",
    author: "李光耀"
  },
  {
    quote: "一份耕耘，一份收獲；一份付出，一份回報(bào)。",
    author: "王陽(yáng)明"
  },
  {
    quote: "只要功夫深，鐵杵磨成針。",
    author: "李白"
  },
  {
    quote: "有志者事竟成。",
    author: "龔自珍"
  },
  {
    quote: "天道酬勤。",
    author: "韓愈"
  },
  {
    quote: "千里之行始于足下。",
    author: "老子"
  },
  {
    quote: "路漫漫其修遠(yuǎn)兮，吾將上下而求索。",
    author: "屈原"
  },
  {
    quote: "讀書破萬卷，下筆如有神。",
    author: "李白"
  },
  {
    quote: "吃一塹，長(zhǎng)一智。",
    author: "佚名"
  },
  {
    quote: "先天下之憂而憂，后天下之樂而樂。",
    author: "范仲淹"
  },
  {
    quote: "一寸光陰一寸金，寸金難買寸光陰。",
    author: "陳毅"
  },
  {
    quote: "不積跬步，無以至千里；不積小流，無以成江海。",
    author: "荀子"
  },
  {
    quote: "前事不忘，后事之師。",
    author: "司馬遷"
  },
  {
    quote: "生命中最大的浪費(fèi)是把時(shí)間浪費(fèi)在了等待上。",
    author: "李開復(fù)"
  }
];

更新名言、作者信息

上面我們創(chuàng)建一個(gè)quotes的數(shù)組，然后來承載我們的名言內(nèi)容，下面我們要去獲取到我們名言和作者的元素；然后進(jìn)行更新；首先我們來想一下我們的名言應(yīng)該是隨機(jī)在數(shù)組中去拿取一條然后進(jìn)行呈現(xiàn)，我們先來實(shí)現(xiàn)這個(gè)功能；我們來創(chuàng)建一個(gè)getRandomQuote這樣的方法，我們沒吊用一次都會(huì)隨機(jī)為我們返回一條名言信息；我們可以看到方法中我們通過數(shù)組長(zhǎng)度范圍內(nèi)來獲取一個(gè)隨機(jī)數(shù)進(jìn)行向下取整然后作為下標(biāo)然后進(jìn)行返回 quotes[index] 。
?

function getRandomQuote() {
  const index = Math.floor(Math.random() * quotes.length);
  return quotes[index];
}

那到這里呢，我們就已經(jīng)寫好了一個(gè)函數(shù)，我們每次調(diào)用函數(shù)都可以隨機(jī)拿到我們數(shù)組里面的一條名言，我們可以在上面的點(diǎn)擊事件中去每次調(diào)用然后拿到我們的名言跟作者然后更換我們展示的內(nèi)容，首先調(diào)用上面的方法然后獲取到名言內(nèi)容，然后我們獲取展示名言和作者的元素，最后我們innerText方法來進(jìn)行內(nèi)容更換；保存代碼我們來點(diǎn)擊按鈕嘗試一下；
?

document.querySelector("#new-quote").addEventListener("click", function(){
  let quote = getRandomQuote();
  let textElement = document.querySelector(".text");
  let authorElement = document.querySelector(".author");
  textElement.innerText = quote.quote;
  authorElement.innerText = `- ${quote.author}`;
});

跳轉(zhuǎn)到站內(nèi)Blink

我們上面可以看到點(diǎn)擊按鈕，我們的展示的內(nèi)容就被更換了，最后的一個(gè)小功能呢就是我們可以通過點(diǎn)擊右下角的 ‘分享到CSDN&Blink‘ 來跳轉(zhuǎn)到站內(nèi)的Blink發(fā)布動(dòng)態(tài)的功能，其實(shí)我們上面編寫這塊的時(shí)候的DOM是用了一個(gè)a標(biāo)簽，其實(shí)a標(biāo)簽大的亮點(diǎn)就是跳轉(zhuǎn)路徑，標(biāo)簽內(nèi)部有一個(gè)href屬性，屬性值可以是一個(gè)url地址。添加上后我們就可以嘗試一下點(diǎn)擊跳轉(zhuǎn)到Blink可以直接發(fā)動(dòng)態(tài)了。

<a class="tweet-quote" >分享到 CSDN&Blink</a>

完整代碼

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>名言</title>
  <style>
   .quote-box {
      width: 500px;
      margin: 100px auto;
      padding: 30px;
      border-radius: 5px;
      box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
    }

   .text {
      font-size: 24px;
      font-style: italic;
      margin-bottom: 20px;
    }

    .author {
      font-size: 18px;
      text-align: right;
    }

    #new-quote {
      background-color: #4CAF50;
      color: #fff;
      border: none;
      padding: 10px 20px;
      margin-top: 20px;
      border-radius: 5px;
      cursor: pointer;
    }

    .tweet-quote {
      display: block;
      text-align: right;
      margin-top: 10px;
      color: #4CAF50;
    }
  </style>
</head>

<body>

  <div class="quote-box">
    <p class="text">這是文言部分</p>
    <p class="author">我是作者</p>
    <button id="new-quote">生成名言</button>
    <a class="tweet-quote" >分享到 CSDN&Blink</a>
  </div>

</body>

<script>

let quotes = [
  {
    quote: "生命不止，奮斗不息。",
    author: "方志敏"
  },
  {
    quote: "知識(shí)就是力量。",
    author: "李約瑟"
  },
  {
    quote: "先苦后甜，后苦變甜；先甜后苦，后甜變苦。",
    author: "林語(yǔ)堂"
  },
  {
    quote: "成功是一份耕耘，而非一次得手。",
    author: "賈平凹"
  },
  {
    quote: "寶劍鋒從磨礪出，梅花香自苦寒來。",
    author: "陸游"
  },
  {
    quote: "寶劍不磨，其鋒不利；人不學(xué)習(xí)，其智不明。",
    author: "李光耀"
  },
  {
    quote: "一份耕耘，一份收獲；一份付出，一份回報(bào)。",
    author: "王陽(yáng)明"
  },
  {
    quote: "只要功夫深，鐵杵磨成針。",
    author: "李白"
  },
  {
    quote: "有志者事竟成。",
    author: "龔自珍"
  },
  {
    quote: "天道酬勤。",
    author: "韓愈"
  },
  {
    quote: "千里之行始于足下。",
    author: "老子"
  },
  {
    quote: "路漫漫其修遠(yuǎn)兮，吾將上下而求索。",
    author: "屈原"
  },
  {
    quote: "讀書破萬卷，下筆如有神。",
    author: "李白"
  },
  {
    quote: "吃一塹，長(zhǎng)一智。",
    author: "佚名"
  },
  {
    quote: "先天下之憂而憂，后天下之樂而樂。",
    author: "范仲淹"
  },
  {
    quote: "一寸光陰一寸金，寸金難買寸光陰。",
    author: "陳毅"
  },
  {
    quote: "不積跬步，無以至千里；不積小流，無以成江海。",
    author: "荀子"
  },
  {
    quote: "前事不忘，后事之師。",
    author: "司馬遷"
  },
  {
    quote: "生命中最大的浪費(fèi)是把時(shí)間浪費(fèi)在了等待上。",
    author: "李開復(fù)"
  }
];

function getRandomQuote() {
  let index = Math.floor(Math.random() * quotes.length);
  return quotes[index];
}
document.querySelector("#new-quote").addEventListener("click", function(){
  let quote = getRandomQuote();
  let textElement = document.querySelector(".text");
  let authorElement = document.querySelector(".author");
  textElement.innerText = quote.quote;
  authorElement.innerText = `- ${quote.author}`;
});

</script>

</html>

?原創(chuàng)不易，還希望各位大佬支持一下

?? 點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！

?? 收藏，你的青睞是我努力的方向！

?? 評(píng)論，你的意見是我進(jìn)步的財(cái)富！

文章來源地址http://www.zghlxwxcb.cn/news/detail-516207.html

到了這里，關(guān)于前端搭建名言生成器(內(nèi)含源碼)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！