<!--最近需要用到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. Centos和Redhat的区别和联系

    网上看到的,转载给大家 CentOS与RedHat的关系: RedHat在发行的时候,有两种方式:二进制的发行方式以及源代码的发行方式.无论是哪一种发行方式,你都可以免费获得(例如从网上下载),并再次 ...

  2. 仿哔哩哔哩应用客户端Android版源码项目

    这是一款高仿哔哩哔哩安卓客户端,跟官方网的差不多吧,界面也几乎是一样的,应用里面也加了一些弹出广告,大家可以参考一下吧,安装测试包在源码文件那里,大家可以多多参考一下. 哔哩哔哩弹幕网是国内知名的弹幕 ...

  3. Docker+OpenvSwitch搭建VxLAN实验环境

    一.概述                                                    1.环境:我这里是2台linux机器(host1和host2),发行版是kali2.0, ...

  4. [No000040]取得一个文本文件的编码方式

    using System; using System.IO; using System.Text; /// <summary> /// 用于取得一个文本文件的编码方式(Encoding). ...

  5. 实用js函数收集

    1. 全选复选框: //复选框全选函数 function SelectAll() { var checkAll = document.getElementsByName("checkAll& ...

  6. oracle中substr() instr() 用法

    --substr(字符串,截取开始位置,截取长度)=返回截取的字 ,) from dual;--返回结果为:m ,) from dual;--返回结果为:m--说明0和1都表示截取的位置为第一个字符 ...

  7. 让IE10等支持classList2.0（转）

    chrome24+, firesfox26+起支持classList2.0,即让它同时添加或删除多个类名, toggle方法支持第2个参数,用于强制添加或删除 var div = document.c ...

  8. MongoDB集群架构及搭建

    MongoDB分布式集群 MongDB分布式集群能够对数据进行备份,提高数据安全性,以及提高集群提高读写服务的能力和数据存储能力.主要通过副本集(replica)对数据进行备份,通过分片(shardi ...

  9. cocoapod

    更新代码: sudo gem install -n /usr/local/bin cocoapods --pre ex: The dependency `` is not used in any co ...

  10. java多线程系类：JUC原子类：02之AtomicLog原子类

    概要 AtomicInteger, AtomicLong和AtomicBoolean这3个基本类型的原子类的原理和用法相似.本章以AtomicLong对基本类型的原子类进行介绍.内容包括:Atomic ...