製作評分星星的方法

八月 16, 2018 分類前端

本文閱讀次數:次

製作評分星星的方法

最近剛好在想要如何做評分星星的效果，所以就來做一下了

ps 如果有跑版把 .text li 裡的 width 條一下應該就可以了

成品

code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style media="screen">
    ul{
      font-size: 0;
      direction: rtl;   /* 把順序反過來 right to left */
      text-align: left;   /*再把他對回去右邊*/
    }
    li{
      display: inline-block;
      width: 0.5em;
      overflow: hidden;
      font-size: 25px;
      -webkit-transition: .5s;
      -o-transition: .5s;
      transition: .5s;

    }
    li:nth-child(even){
      text-indent: -0.5em;
    }
    li:hover~li{
      background-color: #fff;
      color: #fff;
    }
  </style>
  <body>
    <div class="test">
      <ul>
        <li>★</li>
        <li>★</li>
        <li>★</li>
        <li>★</li>
        <li>★</li>
        <li>★</li>
        <li>★</li>
        <li>★</li>
        <li>★</li>
        <li>★</li>
      </ul>
    </div>
  </body>
</html>

kwei

挑戰每天的自己，比昨天更前進一點

CCU_Student

Taiwan

沒有找到文章

opacity 跟 background 差別

opacity 子元素都會受影響，也會變成透明
background-color 子元素就不會影響

example

opacity

Test

<style>
.bg{
background: url("/images/alphaBG.png");
width: 800px;
height:600px;
background-position:center;
color:black;
font-size:8rem;
opacity:.6;
}
.bg-txt{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
</style>
<div class='bg'>
    <div class='bg-txt'>
        Test
    </div>
</div>

上面的範例連文字都會有透明

backgroud

Test

<style>
.bg{
background: url("/images/alphaBG.png");
width: 800px;
height:600px;
background-position:center;
color:black;
font-size:8rem;
}
.bg-txt{
width:100%;
height:100%;
background: rgba(255,255,255,.3);
display:flex;
justify-content:center;
align-items:center;
}
</style>
<div class='bg'>
    <div class='bg-txt'>
        Test
    </div>
</div>

文字不會透明了，只有背竟有透明一點

參考資料

CSS Opacity VS Alpha | Opacity 跟 Alpha的差異 | 調整透明度 CSS實現背景圖片透明，文字不透明效果

Fetch POST 傳遞資料

Jul 7, 2019

最近剛好在使用 fetch 代替 ajax ，剛好遇到了一些小問題，所以寫下來提醒一下自己

fetch 是一個新的 API 可以讓我們可以去做 AJAX ，而且用起來更直觀

當要使用 fetch 來做 POST 我們可以用以下的寫法:

fetch(URL,{
    method:'POST',
    method: 'cors'  // 用來作為 跨域請求用的
})

這樣就可以使用 fetch 發出 POST 的請求，當我們要附上資料時，可以用 FormData 這一個 class 來帶上我們的資料

const fd = new FormData([可以直接指定 dom 元素是 form 的])

const fd = FormData();
fd.append('key',value);

可以用以上兩種方法來給 FormData 資料

最後只需要把 FormData 帶入 fetch 中的欄位，就可以成功帶上資料了

fetch(URL,{
    method:'POST',
    method: 'cors',  // 用來作為 跨域請求用的
    body: fd
})

這邊不需要去指定 Content-Type ，因為 fetch 會幫我們帶上適當的屬性

建立 moodle 工作環境

Apr 4, 2019

環境要求 os ubuntu 18.04.1 apache mysql php moodle 3.x 安裝教學用來建立 server 用的 apache 更新套件 sudo apt update 安裝apache sudo apt install apache2 讓 apache 可以通過防火牆之前，先看一下 sudo ufw app list 現在讓 apache 可以通

環境要求 jdk-11 apache-maven-3.5.2 apache-tomcat-9.0.17 install openjdk sudo add-apt-repository ppa:openjdk-r/ppa sudo apt update sudo apt install openjdk-11-jdk java -version #看一下版本跟有無安裝成功 install tomcat Create Tomcat User sudo groupadd tomcat #創建一個 tomcat 群組 sudo useradd -s /bin/false -g tomcat -d /opt/tomcat tomcat #創建一個較 tomcat 的使用者

PHP session 換頁找不到了

Mar 3, 2019

最近重新架 PHP 的環境，在使用 session 的時候發現了問題，當我在這個網頁設定了 session 後，當我跳轉到另一個網頁後，發現 session 不見了!!!!

我確認了一下我有沒有開啟 session(session_start()) ，也確認了我是在同一個網域底下，結果是我在其中一個關鍵的 php 檔案沒有開啟…

於是我上網找了一下有沒有可以避免的方法，發現是 session.auto_start ，它可以自動幫我們開啟 session ，這樣就不會有時忘了開了，可以在 php_info() 中找找看，如下圖，如果確認沒有開後，可以到 php.ini 裡去改掉他

session.auto_start=1 這樣應該就可以了

製作評分星星的方法