提示篇

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. iOS：小技巧（不断更新）

    记录下一些不常用技巧,以防忘记,复制用. 1.获取当前的View在Window的frame: UIWindow * window=[[[UIApplication sharedApplication] ...

  2. React Native 之 View使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  3. Dagger2 (三) 总结篇

    一.Dagger2注入原理 Dagger2以自动生成代码的形式,帮助我们构建依赖图,在使用依赖的时候方便清晰,这里说明一点,在我们使用Dagger2的时候,绝大多数错误都是编译器就会暴漏出来,这也就决 ...

  4. MTU(Maximum transmission unit) 最大传输单元

    最大传输单元(Maximum transmission unit),以太网MTU为1500. 不同网络MTU如下: 如果最大报文数据大小(MSS)超过MTU,则会引起分片操作.   路径MTU: 网路 ...

  5. 1-linux系统管理（一）之安装RHEL 6.4

    linux系统管理之安装RHEL 6.4 进入安装界面 这里选择跳过 点击下一步 选择安装语言 选择键盘 选择系统储存方式 选择是否格式化储存设备 给安装的系统一个计算机名 选择时区 给root一个密 ...

  6. Vim Using

    1 2 set nu 3 set backup 4 set bg=light 5 " transform tab to space 6 set expandtab 7 " auto ...

  7. .数据库连接池技术：DBCP和C3P0

    数据库连接池技术:DBCP和C3P0 1.什么是数据库连接池 已知的方法是需要访问数据库的时候进行一次数据库的连接,对数据库操作完之后再释放这个连接,通常这样业务是缺点很明显的: 用户每次请求都需要向 ...

  8. java.lang.OutOfMemoryError: PermGen space及其解决方法

    PermGen space的全称是Permanent Generation space,是指内存的永久保存区域OutOfMemoryError: PermGen space从表面上看就是内存益出,解决 ...

  9. 子DIV设置margin-top影响父DIV位置的解决办法

    父div如果没有任何东西,子div设置margin-top,父div会下落 <!DOCTYPE html> <html lang="en"> <hea ...

  10. curl -w,–write-out参数详解

    顾名思义,write-out的作用就是输出点什么.curl的-w参数用于在一次完整且成功的操作后输出指定格式的内容到标准输出. 输出格式由普通字符串和任意数量的变量组成,输出变量需要按照%{varia ...