CSS3實現計算器的介面 Day70

2021-06-22 20:51:07 字數 1233 閱讀 1131

心疼了那麼久,妻子還是尊重了我的選擇,可我也決定要更多的時間來陪伴她,我的路還有很長,不用走的那麼匆匆忙忙,錯過那些路邊風景的同時,甚至會遺忘了那個同行的人,少了那雙扶持的手,走快了,摔的會很疼的。

閒話不多說了,繼續記錄,我原本想用js實現乙個計算器的,但不曾想,只是做個介面就花了一段時間,還是對有些知識不夠牢固。

先來看看我做的介面,有些粗糙,可是完全用css寫的哦

實際上這裡面的應用到的都比較熟悉,但是在進行編寫的時候還是耽擱了好長時間,這次時間主要耽誤在了陰影部分上來了,這次就來記錄下遺漏的這個點:

box-shadow:x-offset y-offset blur-radius spread-radius color inset;

這裡的幾個引數分別代表了什麼呢,這裡我們要首先理解陰影的原理,在這裡我理解的是,是整個div位置的假移動,陰影就是假使按照給定的條件移動後可能的效果,因為是假設,所以是虛幻的,是影子,這樣我們來看一下這幾個引數,

前兩個就是給定的移動條件,乙個平面移動的角度,而緊隨其後的兩個就是移動多遠,按當前角度移動要到達的目的地,而移動到指定的目的地了,這是一種可能性,我們用一種顏色來記錄這種假定,這就有了color,而inset則是唯一值,唯一值的意思就是只有「寫」和「不寫」,沒有其他可能性,而inset「寫」的話代表了向裡進行移動,而「不寫」的話代表了向外移動

這裡再來記錄乙個地方,就是的html標籤,這個我在很容易寫出來的時候,朋友給出了很驚訝,一副看到了好東西的樣子,讓我好笑的同時又添了乙份自信,自己選的學習步驟還是很正確的,w3cshool確實沒有白看啊

好,接下來是看一下實現的**:

html語言:

12

3+456

- 789

* 0%yx/=

然後來看下css樣式:

今天就先記錄地這吧,步子還是不要邁太大,去休息,明天又是乙個好心情。。。

計算器的實現

計算器?不是非常簡單嗎?宣告兩個float型變數,再加上操作符,自動計算結果出來!public static float calc float a,float b,int operator 呵呵,這麼簡單,那就沒必要寫成文章了 這裡要說的是 程式計算表示式的值,比如 1 2 3 5 9 就是簡單兩個...

計算器的實現

今天來講一下計算器的實現,效果得是怎樣的呢,拿出你的手機的計算器看一下就知道了,注意的是我們運算了兩個數再點選等號會出結果,點選運算子也是會出結果的,這是第一點需要注意的,第二點需要注意的是出了結果出來之後再點選數字會覆蓋結果,根據你想要的效果,我們一步步迴圈漸進的來看看效果。首先我們來宣告乙個變數...

css3的動畫實現

關鍵幀 keyframes 動畫名稱 20 40 60 80 100 animation name 定義乙個或者多個動畫的名稱 eg demo animation duration 動畫執行的時間 取值 0時,動畫不執行 time 正數 單位為s或者ms animation delay 動畫執行的延...