提示篇

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. Java 反射 使用总结

    转载请标明出处:http://www.cnblogs.com/zhaoyanjun/p/6074887.html1 本文出自[赵彦军的博客] 反射机制是什么 反射机制是在运行状态中,对于任意一个类,都 ...

  2. android常用框架收录

    1.Volley.Retrofit 网络框架2.ormlite.GreenDao数据库框架3.AndroidAnnotations.butterknife.Dagger注解框架4.响应式编程    R ...

  3. BigCouch资料整理

    BigCouch架构 CHTTPD 封装了FABIC接口,CouchDB在HTTP层的集群操作 FABRIC  CouchDB集群的操作代理. 主要用于控制CouchDB集群,Erlang层面的操作 ...

  4. web方式修改svn密码

    原帖:http://www.iusesvn.com/bbs/viewthread.php?tid=20 之前的Apache22Passwd版本有个小bug,用现在的浏览器会显示空白页.这个版本Apac ...

  5. mysql-5.7.9-winx64在windows上安装遇到的一些问题

    mysql5.7.9版本以上在windwos上安装时会遇到无法启动但是没有任何报错的问题,那是因为5.7.9以上的版本在MySQL目录下会缺少data目录: Data目录下存储的是一些表文件,用来描述 ...

  6. APUE 习题3-2 实现dup2，要求不使用fcntl函数。

    int mydup2(int oldfd, int newfd) {     int tfd = 0;     if (newfd < 0)     {         err_sys(&quo ...

  7. Would Your Work Habits Change if You Were Paid by the Job?

    原文地址:http://success-sys.com/2016/09/26/would-your-work-habits-change-if-you-were-paid-by-the-job/ A ...

  8. stm32 usb error : identifier "bool" is undefined

    .\usb\USB\usb_pwr.h(54): error:  #20: identifier "bool" is undefinedusb\USB\usb_pwr.h(54): ...

  9. L2-011. 玩转二叉树

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA28AAAHQCAIAAAC5rsUiAAAgAElEQVR4nO3dzYts953n+foXcpUL0Q

  10. AC日记——二叉堆练习3 codevs 3110

    3110 二叉堆练习3  时间限制: 3 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 给定N(N≤500,000)和N个整 ...