Animated Progress Circle

static progress circle pogress-circle-bar percentage-circle  SVG屬性解説 stroke-dasharray: 實線長度, 空白長度 svg(viewbox=”-50 -50 100 100″) line(x1=-50,y1=0,x2=100,y2=0) svg border: 1px solid #000 width: 300px height: 300px line stroke: black //stroke-dasharray也可以寫在html的line屬性裡面 stroke-dasharray: 6,15 Display 長度6長度6長度6長度6長度6長度15長度15長度15長度15 dash-strokearray也可以指定%數,100%等於整條線,所以 line stroke: black dash-strokearray: 100% 0% //這樣可以得到一條黑線 line stroke: black dash-strokearray: 0% 100% //這樣可以得到一條看不見的線 stroke-dashoffset: 偏移開始的位置 line裡面偏移數字等於x的減項 svg(viewbox=”-50 -50 100 100″) line(x1=-50,y1=0,x2=100,y2=0) svg […]

DOM

意思 Document Object Mode JavaScript找到html/css的節點node,並且控制或改變它 <h3>Document Object Mode</h3> <p>has existed</p> //document 總體變數 //找到網頁文件下的body tag 裡面包住的所有字,然後換成 document.body.innerHTML=”ERRRRRRRRRRRRR!” Display 如果沒有JavaScript的話,會長這樣 Document Object Mode has existed 但是JavaScript改變了内容,所以變成 ERRRRRRRRRRRRR! 使用選擇器改變html, css内容 ID selector: getElementById() div h1#heading My Dogs p Animal is the best friend //getElementById(“ID”) ID選擇器,裡面不用加# document.getElementById(“heading”).innerHTML=”Your Cats” Display Your Cats My Dogs變成Your Cats了 Animal is the best friend […]

Magic Line

參考範例:CSS-TRICK ul#nav li.current ABOUT li.2 STORY li INFO li TICKETS //li#line ul position: relative li display: inline-block padding: 0px margin-right: 10px color: #a3a3a3 transition-duration: 0.5s font-size: 26px position: relative &:hover color: #000 //下底線樣式 #line position: absolute //初始位置(可以去console帶函數算出來) left: 40px width: 90px border-bottom: 3px solid #000 //加入下底線 $(“#nav”).append(“<li id=’line’></li>”); //滑鼠觸發 //hover(移進去的動作, 移出後的動作); $(“li”).hover( //移入 function() { […]

jQuery動畫:animate()

可以變動CSS長、寬、大小等屬性,做出動畫的效果 animate()結構 .animate({ “CSS 屬性”: “值”, “CSS 屬性”: “值”, “CSS 屬性”: “值” }, 動畫時間) 範例 #ani click me #ani width: 300px height: 100px border: 1px solid #000 text-align: center line-height: 75px font-size: 20px background-color: #90a955 color: #fff $(“#ani”) //滑鼠進入 .mouseover( function(){ //在.animate前面加stop(),滑鼠拿走後不會繼續執行動畫 $(“#ani”).stop().animate( { //”CSS屬性”: “值” “font-size”: “40px” //毫秒 },500) //滑鼠移出 .mouseout( function(){ $(“#ani”).stop().animate( {“font-size”: […]

點擊添加class:toggleClass()

原生JavaScript寫法 功能 點一下添加class,再點一下移除class .box .box width: 500px height: 300px border: 1px solid #000 background-image: url(https://goo.gl/yI3IYK) background-size: cover cursor: pointer .img background-image: url(https://goo.gl/MvqA8n) background-size: cover $(“.box”).click( function(){ //toggleClass裡面的class不用加. $(this).toggleClass(“img”); } ); Display

Python 數字

除法 Python 2 的【/】記號表示整數除法,除法結果不會保留小數 >>>3/2 1 Python 3 的除法就可以算出小數了 >>>3/2 1.5  解決方法:在Python 2 算出小數除法 除數或被除數有小數點(flow) #除數或被除數有小數點 >>>3.0/2 1.5 #所以這樣做也可以 >>>3/2.0 1.5 使用float函數 #float用在3或是2都可以 >>>float(3)/2 1.5 使用module:future #future module幫助在Python 2 套用Python 3 的功能 #匯入future後,之後的code就不用擔心除法問題了 >>>from __future__ import division >>>3/2 1.5 次方 #2的3次方 >>>2**3 8 >>>4**5 1024 #根號4 >>>4**0.5 2 變數 #宣告變數 >>>a=5 >>>a 5 >>>a+a 10 […]

動畫收合:fadeIn(), slideDown(), fadeToggle(), slideToggle()

fadeIn()  fadeOut() 淡入與淡出 等於加上opacity的動態變化 功能介紹:點開任一PROBLEM後,點選其他PROBLEM會産生 原ANSWER收合 新ANSWER展開 撰寫方法:命令系統在每次點擊時執行 收合所有ANSWER 展開指定ASNWER ul li div.problem PROBLEM A div.ans ANSWER A li div.problem PROBLEM B div.ans ANSWER B li div.problem PROBLEM C div.ans ANSWER C li div.problem PROBLEM D div.ans ANSWER D ul display: inline-block li display: block margin: 10px .problem padding: 10px 15px 10px 15px background-color: #90a955 […]

EXCEL函數 vlookup

使用情境 手上有一筆清單及資料庫如下 資料庫 A B 中文 日文 紅色 レッド 藍色 ブルー 綠色 グリーン 黃色 イエロー 黑色 ブラック 白色 ホワイト 棕色 ブラウン 粉紅色 ピンク 資料清單 C 紅色 藍色 棕色 想要資料清單自動比對出日文翻譯,如下 比對後的資料清單 C D 紅色 レッド 藍色 ブルー 棕色 ブラウン vlookup參數解説 vlookup共有4個値: =vlookup(①清單一列, ②資料庫多列或一列, ③目標資料的欄數, ④結果回報) vlookup只能比對縱向列資料,如果是橫向欄資料必須使用hlookup比對 ①參數:資料清單,也就是【C:C】 C 紅色 藍色 棕色 ②參數:資料庫,可以選取多欄或單欄,這邊選取兩欄,即為【A:B】 A B 中文 日文 […]

物件導向

使用共同物件,做出其他很多的類似物件,簡化物件數 Object Types 聯想:貓咪有不同毛色,品種,但他們都是動物。 1  建立基盤:改寫物件為建構子函數constrator function //物件形式 var winstonTeen = { “nickname”: “Winsteen”, “age”: 15, “x”: 100, “y”: 200 }; var winstonAdult = { “nickname”: “Mr. Winst-a-lot”, “age”: 30, “x”: 229, “y”: 200 }; //建構子形式,改寫上方資料如下 var Winston = function(nickname, age, x, y) { this.nickname = nickname; this.age = age; this.x = x; this.y = […]

jQuery 收合選單:show(), hide(), toggle()

show() 顯示指定物件,等於在該物件添加display: none屬性 ul li div.problem PROBLEM A div.ans ANSWER A li div.problem PROBLEM B div.ans ANSWER B li div.problem PROBLEM C div.ans ANSWER C li div.problem PROBLEM D div.ans ANSWER D ul display: inline-block li display: block margin: 10px .problem padding: 10px 15px 10px 15px background-color: #90a955 color: #fff .ans padding: 15px background-color: #ebf9de […]