欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)計(jì)算器和計(jì)時(shí)器功能

 更新時(shí)間：2022年07月21日 17:07:43   作者：肖帆咪  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)計(jì)算器和計(jì)時(shí)器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)計(jì)算器和計(jì)時(shí)器的具體代碼，供大家參考，具體內(nèi)容如下

完成簡單的計(jì)算器

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?#box {
?? ??? ??? ??? ?width: 250px;
?? ??? ??? ??? ?height: 200px;
?? ??? ??? ??? ?background-color: #C0C0C0;
?? ??? ??? ?}
?? ??? ??? ?input{
?? ??? ??? ??? ?width: 50px;
?? ??? ??? ??? ?height: 27px;
?? ??? ??? ?}
?? ??? ??? ?#text{
?? ??? ??? ??? ?width: 229px;
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<script type="text/javascript">
?? ??? ??? ? ?var num = 0;?
?? ??? ??? ? ?function str(num) {
?? ??? ??? ? ? ?document.getElementById('text').value += document.getElementById(num).value;
?? ??? ??? ? ?}
?? ??? ??? ? ?function eva() {
?? ??? ??? ? ? ?var res = eval(document.getElementById("text").value);
?? ??? ??? ??? ?document.getElementById("text").value = res;
?? ??? ??? ? ?}
?? ??? ??? ? ?function clearNum() {
?? ??? ??? ? ? ?document.getElementById("text").value = null;
?? ??? ??? ? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<div id="box">
?? ??? ??? ?<table ?cellspacing="0" cellpadding="5px">
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<th colspan="4">
?? ??? ??? ??? ??? ??? ?<input type="text" id="text" />
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="7" id="7" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="8" id="8" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="9" id="9" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="+" id="+" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="4" id="4" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="5" id="5" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="6" id="6" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="-" id="-" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="1" id="1" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="2" id="2" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="3" id="3" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="*" id="*" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="0" id="0" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="c" id="c" onclick="clearNum()"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="=" id="=" onclick="eva()"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ??? ?<th>
?? ??? ??? ??? ??? ??? ?<input type="button" value="/" id="/" onclick="str(this.id)"/>
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ?</tr>
?? ??? ??? ?</table>
?? ??? ?</div>
?? ?</body>
</html>

效果圖

制作一個(gè)計(jì)數(shù)器 如圖，點(diǎn)擊開始從1開始計(jì)數(shù)，點(diǎn)擊停止，停止計(jì)數(shù)，點(diǎn)擊復(fù)位歸0并結(jié)束計(jì)數(shù)

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<script type="text/javascript" src="../js/jquery.1.8.3.min.js" charset="UTF-8">

?? ??? ?</script>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?var second = 0;
?? ??? ??? ?var minutes = 0;
?? ??? ??? ?function star() {
?? ??? ??? ??? ?$("#start").attr("disabled", true);
?? ??? ??? ??? ?$("#stop").attr("disabled", false);
?? ??? ??? ??? ?t = setInterval("sum()", 10);
?? ??? ??? ?}

?? ??? ??? ?function sum() {
?? ??? ??? ??? ?if(second != 100){
?? ??? ??? ??? ??? ?second++;
?? ??? ??? ??? ??? ?if(minutes<10){
?? ??? ??? ??? ??? ??? ?if (second < 10 ) {
?? ??? ??? ??? ??? ??? ??? ?$("#text").val("0"+minutes+".0" + second);
?? ??? ??? ??? ??? ??? ?} else if (second < 100) {
?? ??? ??? ??? ??? ??? ??? ?$("#text").val("0"+minutes+"."+second);
?? ??? ??? ??? ??? ??? ?}?
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?if (second < 10 ) {
?? ??? ??? ??? ??? ??? ??? ?$("#text").val(minutes+".0" + second);
?? ??? ??? ??? ??? ??? ?} else if (second < 100) {
?? ??? ??? ??? ??? ??? ??? ?$("#text").val(minutes+"."+second);
?? ??? ??? ??? ??? ??? ?}?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?second = 0;
?? ??? ??? ??? ??? ?minutes++;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ?}

?? ??? ??? ?function stop() {
?? ??? ??? ??? ?$("#start").attr("disabled", false);
?? ??? ??? ??? ?$("#stop").attr("disabled", true);
?? ??? ??? ??? ?clearInterval(t);
?? ??? ??? ?}

?? ??? ??? ?function res() {
?? ??? ??? ??? ?second = 0;
?? ??? ??? ??? ?minutes = 0;
?? ??? ??? ??? ?$("#text").val("00.00");
?? ??? ??? ??? ?clearTimeout(t);
?? ??? ??? ??? ?$("#start").attr("disabled", false);
?? ??? ??? ??? ?$("#stop").attr("disabled", false);
?? ??? ??? ?}
?? ??? ?</script>
?? ??? ?<style type="text/css">
?? ??? ??? ?#start,
?? ??? ??? ?#res,
?? ??? ??? ?#stop,
?? ??? ??? ?#text{
?? ??? ??? ??? ?border-radius: 25px;
?? ??? ??? ??? ?margin-right: 20px;
?? ??? ??? ?}
?? ??? ??? ?div{
?? ??? ??? ??? ?background-color: aliceblue;
?? ??? ??? ??? ?width: 120px;
?? ??? ??? ??? ?height: 90px;
?? ??? ??? ??? ?margin: auto;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div>
?? ??? ??? ?<table >
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<th colspan="2"><input type="text" ?style="width:50px; text-align: center; " value="00.00" id="text" /></th>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<th><input type="button" id="start" style="background-color: #7FFFD4;" value="開始"
?? ??? ??? ??? ??? ??? ??? ?onclick="star()" />
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ??? ?<th><input type="button" id="stop" style="background-color: bisque;" value="停止" onclick="stop()" />
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<th colspan="2"><input type="button" id="res" style="background-color: #8A2BE2;" value="復(fù)位"
?? ??? ??? ??? ??? ??? ??? ?onclick="res()" />
?? ??? ??? ??? ??? ?</th>
?? ??? ??? ??? ?</tr>
?? ??? ??? ?</table>

?? ??? ?</div>

?? ?</body>
</html>

效果圖：

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 淺析JavaScript訪問對(duì)象屬性和方法及區(qū)別

    淺析JavaScript訪問對(duì)象屬性和方法及區(qū)別

    這篇文章主要介紹了淺析JavaScript訪問對(duì)象屬性和方法及區(qū)別的相關(guān)資料,需要的朋友可以參考下
    2015-11-11
  • JavaScript 嵌套函數(shù)指向this對(duì)象錯(cuò)誤的解決方法

    JavaScript 嵌套函數(shù)指向this對(duì)象錯(cuò)誤的解決方法

    JavaScript對(duì)于全局函數(shù)內(nèi)的this綁定為全局對(duì)象，而對(duì)于嵌套函數(shù)也采用了相同的解釋。
    2010-03-03
  • Javascript 事件流和事件綁定

    Javascript 事件流和事件綁定

    本文中的部分觀點(diǎn)參考至《Javascript高級(jí)程序設(shè)計(jì)》（很好的一本書，推薦大家看看?。?，addEvent函數(shù)借鑒了YUI2.7的_addListener方法，這里也要謝謝YUI那些牛人，向他們致敬！
    2009-07-07
  • 圖片該如何優(yōu)化來提高網(wǎng)站性能

    圖片該如何優(yōu)化來提高網(wǎng)站性能

    這篇文章主要介紹了圖片該如何優(yōu)化來提高網(wǎng)站性能，對(duì)網(wǎng)站性能感興趣的同學(xué)，可以參考下
    2021-05-05
  • 小程序開發(fā)調(diào)用微信支付以及微信回調(diào)地址配置

    小程序開發(fā)調(diào)用微信支付以及微信回調(diào)地址配置

    本文主要介紹了小程序開發(fā)調(diào)用微信支付以及微信回調(diào)地址配置，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-05-05
  • 微信小程序掃描二維碼獲取信息實(shí)例詳解

    微信小程序掃描二維碼獲取信息實(shí)例詳解

    這篇文章主要介紹了微信小程序掃描二維碼獲取信息，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • 使用threejs實(shí)現(xiàn)滾動(dòng)效果的示例代碼

    使用threejs實(shí)現(xiàn)滾動(dòng)效果的示例代碼

    某一天我在刷抖音時(shí),看到一個(gè)UI設(shè)計(jì)師分享了一個(gè)好看的網(wǎng)頁滾動(dòng)動(dòng)效設(shè)計(jì),那種飄逸流暢的動(dòng)畫效果立刻抓住了我的眼球,我腦海里立刻開始想象用代碼如何實(shí)現(xiàn)這個(gè)效果,所以本文給大家分享了如何使用threejs實(shí)現(xiàn)滾動(dòng)效果,感興趣的朋友可以參考下
    2024-01-01
  • 基于JavaScript實(shí)現(xiàn)隨機(jī)顏色輸入框

    基于JavaScript實(shí)現(xiàn)隨機(jī)顏色輸入框

    這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)隨機(jī)顏色輸入框的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，需要的朋友參考下吧
    2016-12-12
  • CocosCreator學(xué)習(xí)之模塊化腳本

    CocosCreator學(xué)習(xí)之模塊化腳本

    這篇文章主要介紹了Cocos Creator 模塊化腳本，想加深學(xué)習(xí)CocosCreator腳本的同學(xué)，一定要看一下
    2021-04-04
  • JavaScript算法教程之sku（庫存量單位）詳解

    JavaScript算法教程之sku（庫存量單位）詳解

    這篇文章主要給大家介紹了JavaScript算法教程之sku（庫存量單位）的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
    2017-06-06

最新評(píng)論