<!--最近需要用到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. Linux rpmbuild命令

    一.简介 rpmbuild命令用于创建软件的二进制包和源代码包. 二.选项 参考:http://blog.sina.com.cn/s/blog_4ba5b45e0102e5r2.html http:/ ...

  2. C# 中的占位符本质

    占位符本质 1.占位符是相对于String字符串类型而言的. 2.占位符其实就是调用String.Format()方法.把指定的变量拼接到定义好的字符串模板中组成新的字符串.

  3. HDU3535AreYouBusy[混合背包 分组背包]

    AreYouBusy Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  4. dotNet开发游戏微端

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

  5. FLEX的动画

    1.使用自带效果 在Flex里面不像在Flash里面随意制作动画了,Flex更趋向于应用程序,而不是动画制作了,所以没有了时间轴的概念.在Flex中使用动画效果,可以用Flex自带的Effect,或者 ...

  6. java 22 - 16 多线程之生产者和消费者的问题

    生产者和消费者问题的描述图 通过上图,我们可以发现: 生产者和消费者使用的都是同一个资源(肉包子) 所以,当使用线程的时候,这两类的锁也是同一把锁(为了避免出现线程安全问题) 例子:学生信息的录入和获 ...

  7. scrapy系统学习(1)--概要

    本文操作环境:ubuntu14.04 一.安装Scrapy/Mysql/MySQLdb 参照官网教程安装Scrapy #sudo apt-key adv --keyserver hkp://keyse ...

  8. IE浏览器下ajax缓存导致数据不更新的解决方法

    摘自:http://www.iefans.net/ie-ajax-json-shuju-huancun/ 最近做设计的时候遇到一个小问题,当你用jquery的getjson函数从后台获取数据的时候,I ...

  9. xenserver磁盘扩容扩不大问题解决

    http://www.osyunwei.com/archives/7956.html xenserver将磁盘扩大后,fdisk可以看到容量大了 但是df -h确实没大?   解决: fdisk /d ...

  10. c#:Reflector+Reflexil 修改编译后的dll/exe文件

    不知道大家有没有这样的经历:现场实施时测试出一个bug,明明知道某个dll/exe文件只要修改一二行代码即可,但手头没有开发环境,紧急情况下,可以用reflector + reflexil 临时直接修 ...