<!--最近需要用到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. 树莓派2 安装 win10Iot 和 Ubuntu mate

    注册博客账号已经2年多了.一直没写博文现在抽空写写. 写这篇博文是因为我之前在网上找了蛮多有关教程写的都不是很清晰.安装没成功.所以我写一下我根据网上找到的整理一下分享出来. 非专业只是业余玩玩.好了 ...

  2. Debian Environment Variables

    原文:EnvironmentVariables General Environment variables are named strings available to all application ...

  3. css3中变形与动画（一）

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3 ...

  4. Java Web之JSP技术

    JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术.JSP这门技术的最大的特点在于,写jsp就像在写html,但它相比htm ...

  5. 给深度学习入门者的Python快速教程 - 基础篇

    实在搞不定博客园的排版,排版更佳的版本在: https://zhuanlan.zhihu.com/p/24162430 Life is short, you need Python 人生苦短,我用Py ...

  6. jquery.roundabout.js实现3D图片层叠旋转木马切换

    最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area& ...

  7. 0e开头md5汇总

    PHP在处理哈希字符串时,会利用"!="或"=="来对哈希值进行比较,它把每一个以"0E"开头的哈希值都解释为0,所以如果两个不同的密码经过 ...

  8. django复习笔记3:实战

    1.初始化 2.配置后台,增加测试数据 3.测试urls/views/templates 4.增加静态资源 5.修改样式 6.模版继承 7.增加博文主页 8.增加表单 9.完善新增页面和编辑页面的表单 ...

  9. MySQL的mysql_insert_id和LAST_INSERT_ID(转)

    本文介绍的是mysql中last_insert_id和mysql_insert_id的区别 1 mysql_insert_id 一.PHP获取MYSQL新插入数据的ID mysql_insert_id ...

  10. Java 基础命名空间

    java.lang (提供利用 Java 编程语言进行程序设计的基础类)java.lang.annotation(提供了引用对象类,支持在某种程度上与垃圾回收器之间的交互)java.lang.inst ...