亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【學習打卡】第12天 仿計算器案例(計算器輸入框)

课程名称:仿计算器案例


课程章节:计算器输入框


二 课程内容


完善计算器输入框

1.文本框外观调整 

2.数字向右对齐

3. 文本框数字初始化

4.禁止键盘输入



修改value值 20个计算器不同符号

https://img1.sycdn.imooc.com//62fc81230001aebe08410529.jpg

我们发现有一个符号乱码了

https://img1.sycdn.imooc.com//62fc81770001e51f07920567.jpg

  我们给它加上

utf-8

加上这一行代码就可以了 ,网上有很多也,也可以自己敲

https://img1.sycdn.imooc.com//62fc81f7000168c710000344.jpg

ok了

https://img1.sycdn.imooc.com//62fc826600013e1d09190488.jpg

 


 2.修改一下0的对齐方式 向右对齐

https://img1.sycdn.imooc.com//62fc82d2000141ff07760428.jpg

    在text设置 text-align: right 把宽度也微调一下147px

https://img1.sycdn.imooc.com//62fc833e0001d9d009620596.jpg

在调整一下边框框细,还有它的背景颜色

https://img1.sycdn.imooc.com//62fc83a80001ab0d08560323.jpg

3.用js方法禁止键盘输入,用这种方式简洁方便以后维护

    给文本框name和id是num

https://img1.sycdn.imooc.com//62fc845700016cf508520385.jpg 


  js里创建函数   

    function into(){

    var num =document.getelementbyid("num")

    num.value = 0 //给予初始化的值是0

    num.disabled = "disabled" //禁止键盘输入

}

https://img1.sycdn.imooc.com//62fc86e000019c6910620682.jpg


  然后在body写入onload调用刚才写的into函数 更新数据

https://img1.sycdn.imooc.com//62fc8726000144cd08470524.jpg

效果

https://img1.sycdn.imooc.com//62fc873e0001826012270704.jpg

三.本章难点

    解决乱码和调用js函数,其实也挺很简单O(∩_∩)O




點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
數據庫工程師
手記
粉絲
5
獲贊與收藏
0

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消