简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 初识js 图片切换,简易计算器 2018-3-29
Blogger Information
Blog 17
fans 0
comment 0
visits 11989
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
初识js 图片切换,简易计算器 2018-3-29
一片叶
Original
799 people have browsed it

图片切换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>javascript初识图片切换</title>
  <style>
    ul{
      padding: 0;
    }
    li{
      list-style: none;
    }
    a{
      text-decoration: none;
      color: white;
    }
  .box{
    margin: 40px auto;
    width: 500px;
    height: 700px;
    border: 1px dotted #abe2a4e1;
    text-align: center;
  }
  li{
    display: inline-block;
    width: 24%;
    height: 30px;
    text-align: center;
    background: cadetblue;
  }
  li:hover{
    background: cornflowerblue;
  }
  a{
    font:16px/30px 微软雅黑;
  }
  #neirong{
    margin:10px auto;
    width: 80%;
    border-top: 1px solid rgba(204, 204, 204, 0.377);
  }
  </style>
</head>
<body>
  <div class="box">
      <h2>图片切换</h2>
    <ul>
      <li><a href="./imgs/1.png" title="诗号：半神半圣亦半仙，全儒全道是全贤，脑中真书藏万卷，掌握文武半边天。" >素还真</a></li>
      <li><a href="./imgs/2.png" title="诗号:征衣红尘化云烟，江湖落拓不知年；剑痴刀狂世纷云，今将衣钵卸双肩。">叶小钗</a></li>
      <li><a href="./imgs/3.png" title="诗号：世事如棋，乾坤莫测，笑尽英雄啊！">一页书</a></li>
      <li><a href="./imgs/4.png" title="诗号:一箫一剑平生意，负尽狂名十五年。箫中弦音藏柔情，剑下腥血寄恨仇；来何汹涌须挥剑，去向缠绵可付箫。">乱世狂刀</a></li>
    </ul>
    <div class="box1">
      <div><img id="img" src="./imgs/1.png" alt="诗号：半神半圣亦半仙，全儒全道是全贤，脑中真书藏万卷，掌握文武半边天。"></div>
      <p id="neirong">诗号：半神半圣亦半仙，全儒全道是全贤，脑中真书藏万卷，掌握文武半边天。</p>
    </div>
  </div>
  <script>
  var ol = document.getElementsByTagName("li");
  var oa= document.getElementsByTagName("a");
  var oi = document.getElementById("img");
  var op = document.getElementById("neirong");

  for(let i = 0; i<ol.length; i++){
    oa[i].onclick = function(){
      return false;
    }
    ol[i].onclick = function(){
      oi.src = oa[i].href;
      op.innerHTML = oa[i].title;
    };
  }
  </script>
</body>
</html>

2018-03-31_01-45-05.png

简易计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简易计算器</title>
    <style>
        *{
            padding: 0;
        }
        .box{
            margin: 50px auto;
            width: 337px;
            padding: 10px;
            border: 1px solid lightblue;
        }
        input, 
        button,
        option{
            width: 60px;
            height: 30px;
            outline: none;
            transition: 150ms;
        }
        button{
            background: lightblue;
            border: none;
        }
        button:active{
            background: rgb(139, 175, 187);
        }
        p{
            border-bottom: 1px solid bisque;
            width: 337px;
        }
        span{
            display: inline-block;
            width: 60%;
            height: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" id="value1" value="">
        <select name="caozuofu" id="caozuofu">
            <option value="+" selected>+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" id="value2" value="">
        <button id="jisuan">计算</button>
        <button id="chongzhi">重置</button>
        <p >计算结果:<span id="jieguo"></span></p>
    </div>
</body>

<script>
    // 获取DOM节点
    var op = document.querySelector("#caozuofu");
    var ov1 = document.querySelector("#value1");
    var ov2 = document.querySelector("#value2");
    var obt = document.querySelector("#jisuan");
    var ob2 = document.querySelector("#chongzhi");
    var ojg = document.querySelector("#jieguo");

    // 将字符串转换为浮点数且判断是否为数字类型的函数panduan
    function panduan(num){
        num = parseFloat(num);
        if(typeof(num) !== "number"){
            alert("请输入数字")
        }else{
            return num;
            }
    }
    // 点击计算事件
    obt.onclick = function(){
        // 调用函数panduan()
        var val1= panduan(ov1.value);
        var val2= panduan(ov2.value);
        // 获得select节点的值
        let op2 = op.value;
        // 对应select节点的值,分别进行不同的运算操作
        if(op2 === "+"){
            ojg.innerHTML =val1 + "+" + val2 + "=" + (val1 + val2);
        }else if(op2 === "-"){
            ojg.innerHTML =val1 + "-" + val2 + "=" + (val1 - val2);
        }else if(op2 === "*"){
            ojg.innerHTML =val1 + "*" + val2 + "=" + (val1 * val2);
        }else if(op2 === "/") {
            // 判断除数是否为0
            if(val2 !==0){
                ojg.innerHTML =val1 + "/" + val2 + "=" + (val1 / val2);
            }else {
            alert("除数不能为0!!!")
            }
        };
    }
    // 点击复位事件
    ob2.onclick = function(){
        ojg.innerHTML = "";
        ov1.value = "";
        ov2.value = "";
    };
</script>
</html>

firefox_2018-03-31_01-44-47.png

dllhost_2018-03-31_01-44-16.png

dllhost_2018-03-31_01-44-23.png

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！