提示篇

function fun(){

    var is = confirm('选择对话框');/*确定取消对话框*/

    if(is == true){

        document.write('真');/*网页输出字符*/

    }else{

        document.write('假');

    }

    var name = prompt('请输入内容',"占位符");

    document.write(name);

}

/*

alert  confirm  prompt

*/

原型

    <script>

        //原型：类似于iOS里面的类目

        function Person() {//定义类

            this.Age = 10;

        }

        var p1 = new Person();

        //访问原型

        p1.__proto__.Title = '123';//为原型注释数据成员

        Person.prototype.Name = '刘冠';

        var p2 = new Person()

        alert(p2.Age+'\n'+p2.Title+'\n'+p2.Name)

    </script>

跑马灯测试

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <style>

        #id {

            position:absolute;

            border:1px solid red;

            background-color:blue;

            color:white;

            width:100px;

        }

    </style>

    <script>

        var left = 0;

        var direction = 1;

        function run() {

            left += 10*direction;

            if (left + 100 >= window.innerWidth) {

                direction = -1;

            }

            if (left <= 0) {

                direction = 1;

            }

            var temp = document.getElementById('id');

            temp.style.left = left + 'px';

        }

        onload = function () {

            setInterval(run, 100);

        }

    </script>

</head>

<body>

    <div id="id">跑马灯</div>

</body>

</html>

动态标签（与XML类似）

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <script>

        onload = function () {

            document.getElementById('butImage').onclick = function () {

                var img = document.createElement('img');

                img.src = 'IMG_0457.JPG';

                document.getElementById('divContainer').appendChild(img);

            }

            document.getElementById('butSrc').onclick = function () {

                var a = document.createElement('a');

                a.href = 'http://www.baidu.com';

                a.innerText = '百度';

                document.getElementById('divContainer').appendChild(a);

            }

            document.getElementById('clear').onclick = function () {

                var nodes = document.getElementById('divContainer').childNodes;

                for (var i = nodes.length-1; i > 0; i--) {

                    document.getElementById('divContainer').removeChild(nodes[i]);

                }

            }

        }

    </script>

</head>

<body>

    <input type="button" id="butImage" value="图片" />

    <input type="button" id="butText" value="文本框" />

    <input type="button" id="butSrc" value="超链接" />

    <input type="button" id="clear" value="删除" />

    <div id="divContainer">

    </div>

</body>

</html>

模仿五星好评

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <script>

        onload = function () {

            var number = -1;

            var images = document.getElementsByTagName('img');

            for (var i = 0; i < images.length; i++) {

                //光标放上去

                images[i].onmouseover = function () {

                    //将之前的图片变黄，之后的图片变灰

                    var id = this.id;

                    for (var i = 0; i < images.length; i++) {

                        if (i <= id) {

                            images[i].src = "images/star2.png";

                        }else{

                            images[i].src = "images/star1.png";

                        }

                    }

                }

                //光标移开

                images[i].onmouseout = function () {

                    for (var i = 0; i < images.length; i++) {

                        if (i <= number) {

                            images[i].src = "images/star2.png";

                        } else {

                            images[i].src = "images/star1.png";

                        }

                    }

                    number = -1;

                }

                //点击

                images[i].onmousedown = function () {

                    number = parseInt(this.id);

                    document.getElementById('text').innerText = this.id;

                }

            }

        }

    </script>

</head>

<body>

    <img id="0" src="data:images/star1.png" />

    <img id="1" src="data:images/star1.png" />

    <img id="2" src="data:images/star1.png" />

    <img id="3" src="data:images/star1.png" />

    <img id="4" src="data:images/star1.png" />

    <div id="text"></div>

</body>

</html>

HTML之JS学习的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. js学习之变量、作用域和内存问题

    js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...

  3. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  4. 【Knockout.js 学习体验之旅】（2）花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  5. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  6. js学习篇1--数组

    javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...

  7. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  8. NODE.JS学习的常见误区及四大名著

    NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang ...

  9. Node.js学习系列总索引

    Node.js学习系列也积累了一些了,建个总索引方便相互交流学习,后面会持续更新^_^! 尽量写些和实战相关的,不讲太多大道理... Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- ...

  10. 【入门必备】最佳的 Node.js 学习教程和资料书籍

    Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...

随机推荐

  1. Struts2的经典入门

    一:Struts2的起源与背景 在了解Struts2之前我们先来聊聊Struts1,我们都知道在很长的一段时间内,所有的MVC框架中,Struts1他是处于一个超级大咖的地位,无论是从市场角度和使用的 ...

  2. UIDatePicker

    UIDatePickerDemo 效果 用法 1.导入文件(CustomDatePickerView.h/.m 和UIView+SetRect.h/.m) 2.在所要用到地方导入头文件  #impor ...

  3. Android MVP模式 谷歌官方代码解读

    Google官方MVP Sample代码解读 关于Android程序的构架, 当前(2016.10)最流行的模式即为MVP模式, Google官方提供了Sample代码来展示这种模式的用法. Repo ...

  4. (十一)Maven远程仓库的各种配置

    1.远程仓库的配置 在平时的开发中,我们往往不会使用默认的中央仓库,默认的中央仓库访问的速度比较慢,访问的人或许很多,有时候也无法满足我们项目的需求,可能项目需要的某些构件中央仓库中是没有的,而在其他 ...

  5. IT软件的编程方向 - 进阶者系列 - 学习者系列文章

    IT软件经过了这么些年的发展,已经形成了很多的软件公司和开发团队,而且当前编程语言也有很多种,让开发人员能够有很大的选择.现在国际上的开发阵营基本分为ASP.NET.JAVA和PHP三种,但是每种开发 ...

  6. 树莓派3B更新软件

    因为软件是要不断更新的,所以半个月或者一个月要升级一下软件 升级软件非常简单 在终端或者SSH里输入 sudo apt-get update && apt-get upgrade -y ...

  7. IE8.0.6001这个版本执行JS报错

    现场: OS  winserver 2008 IE8.0.6001.18702   JS报错,不能登陆 OS  XP   IE8.0.6001.18702CO     JS报错,不能登陆 公司测试: ...

  8. JSTREE 实现AJAX重载入时刷新所有节点树

      $().ready(function() { var tree = $('#tree'); tree.jstree({ 'core': { data: null } }); $("#xr ...

  9. js控制div滚动条，滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

  10. C#基础---Attribute(标签） 和 reflect（反射) 应用二

    以前我有写过一篇有关,打标签和反射的应用,主要用于类中字段的验证.下面是连接 C#基础---Attribute(标签) 和 reflect(反射) 应用. 这个项目迭代发现公司项目里面发现老代码对业务 ...