<!--最近需要用到js相关的知识 就把在W3cSchool 下学到的东西做个笔记，方便以后再看 -->
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

</head>

<body>

    <h4 id="haha">gai bian zhe li </h4>

    <button type="button" onclick="btnClick()">Block button</button>

    <p>-----------------------------------------------------------------------------------------------</p>

    <h4>js 改变图片</h4>

    <img id="Image" onclick="changeImage()" src="img/eg_bulboff.gif" />

    <p>点击灯泡，点亮或熄灭灯</p>

    <p>--------------------------------------------------------------------------------------</p>

    <h4>验证输入</h4>

    <input id="input" type="text" />

    <h5 id="show" style="color: #ff0000;">jian ce</h5>

    <button type="button" onclick="inputDetection()">输入验证</button>

    <p>------------------------------------------------------------------</p>

    <h4>js对象</h4>

    <div id="lis"> 显示对象属性值 </div>

    <button type="button" onclick="list()">显示对象属性值</button>

    <p>------------------------------------------------------------------</p>

    <h4>访问对象的方法</h4>

    <input id="UPC" type="text" />

    <p id="upcs">展示</p>

    <button type="button" onclick="upc()">转换成大写</button>

    <p>------------------------------------------------------------------</p>

    <h4>调用带参数的函数</h4>

    <button type="button" onclick="daican('大雷' ,'16')">传递参数</button>

</body>

<script>

    //调用带参数的函数

    function daican(name , age){

        alert("name = "+ name  +", age = " + age);

    }

    //以访问String对象的toUpperCase 方法  将文本转换成大写

    function upc(){

        upcs = document.getElementById("upcs");

        var up = document.getElementById("UPC").value;

        up = up.toUpperCase();

        upcs.innerHTML=up;

    }

    //js对象

    function list(){

        li = document.getElementById("lis");

        var list = {    //list对象拥有4个属性 a1-a4

            a1 : "name1",

            a2 : "name2",

            a3 : "name3",

            a4 : "name4",

        }

        li.innerHTML=list.a1;//对象属性有两种寻址方式

        li.innerHTML=list["a4"];//第二种

    }

    //改变文字内容

    function btnClick(){

        btn = document.getElementById("haha");

        btn.innerHTML="shen me gui";

    }

    //改变图片地址

    function changeImage(){

        imgbg = document.getElementById("Image");

        if(imgbg.src.match("bulbon")){

            imgbg.src="img/eg_bulboff.gif";

        }else{

            imgbg.src="img/eg_bulbon.gif";

        }

    }

    //检测输入

    function inputDetection(){

        show = document.getElementById("show");

        var input = document.getElementById("input").value;

        if(input==""||isNaN(input)){//检测是否 不是数字 is not a number 如果是数字返回true

            show.innerHTML="输入内容不是数字";

        }else{

            show.innerText="";//两个inner 方法功能在这里似乎是一样的，区别在哪里呢？

        }

    }

</script>

</html>

这是上面用到的图片，在img目录下，这部分很基础，也有些注释在里面我就啥都不说了。至于目录结构，一般有点基础的都会，我就不多说了。

js 基础（一）的更多相关文章

  1. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  2. js 基础

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

  3. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

  4. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  5. JS基础（超级简单）

    1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)       ...

  6. Node.js基础与实战

    Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...

  7. js基础到精通全面教程--JS教程

    适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...

  8. JS基础知识总结

      js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...

  9. js基础篇——call/apply、arguments、undefined/null

    a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...

  10. js基础知识总结（2016.11.1）

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

随机推荐

  1. 远程连接mysql报错【1130 -host 'localhost' is not allowed to connect to this mysql server】

    远程连接mysql时包如下错误: 1130 -host 'localhost' is not allowed to connect to this mysql server 解决办法 本地用root账 ...

  2. Assembly - Registers

    Processor operations mostly involve processing data. This data can be stored in memory and accessed ...

  3. Equinox P2的学习

    product.configuration 点击“Add按钮”并添加以下插件: org.eclipse.equinox.p2.ui org.eclipse.equinox.p2.ui.sdk org. ...

  4. 理解 QEMU/KVM 和 Ceph（3）：存储卷挂接和设备名称

    本系列文章会总结 QEMU/KVM 和 Ceph 之间的整合: (1)QEMU-KVM 和 Ceph RBD 的 缓存机制总结 (2)QEMU 的 RBD 块驱动(block driver) (3)存 ...

  5. GitHub注册流程（中英对比）

    GitHub注册流程(中英对比) 注明:为方便完成注册,将以中英文网页截图对应展示. 1. 注册邮箱:        点击GitHub官网进行邮箱注册. 2. 制定个人计划:        页面跳转至 ...

  6. Serializable

    import java.io.*;    public class  Box implements Serializable   {       private int width;       pr ...

  7. dotNet开发游戏微端

    需求分析 功能要求 当玩家使用不支持 unity webplayer 的浏览器进入游戏时,让玩家通过微端玩游戏. 确保微端的功能和页游戏功能一致. 大体功能就是为unity web game开发微端, ...

  8. Java中的四套读写方案

    一.字节流读写方案 FileInputStream:字节流方式读取文本文件 FileoutputStream:字节流写入硬盘 二.字符流读写方案 FileReader:字符流读取文本 FileWrit ...

  9. 调用newtonsoft.json反序列出错

    调用newtonsoft.json反序列出错: Newtonsoft.Json.JsonSerializationException: Cannot deserialize the current J ...

  10. docker中如何制作自己的基础镜像

    一.本地镜像 举个例子:现在把自己的开发环境打包,取名为centos6-base.tar,然后在docker中,以centos6-base.tar作为基准镜像. 1.创建自己的镜像,放置于/root目 ...