提示篇

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. 缓冲区溢出利用——捕获eip的傻瓜式指南

    [译文] 摘要:为一个简单的有漏洞程序写一个简单的缓冲区溢出EXP,聚焦于遇到的问题和关键性的教训,提供详细而彻底的描述 内容表:1. I pity the fool, who can't smash ...

  2. VS2012 Unit Test——Microsoft Fakes入门

    如题,本文主要作为在VS2012使用Fakes的入门示例,开发工具必须是VS2012或更高版本. 关于Fakes的MSDN地址:http://msdn.microsoft.com/en-us/libr ...

  3. xamarin 一般错误解决办法

    1. android_m2repository_r错误 问题描述: Unzipping failed. Please download https://dl-ssl.google.com/androi ...

  4. 第二章作业-第3题（markdown格式）-万世想

    第3题题目是: 完成小组的"四则运算"项目的需求文档(使用Markdown写文档),尝试同组成员在各自PC上修改同一文档后,如何使用Git命令完成GitHub上的文档的更新,而不产 ...

  5. ASP.NET压缩输出的HTML内容

    在ASP.NET中,怎么压缩输出的HTML内容,怎么替换HTML中的换行符,空白,TAB等符号呢? 1.新建一个基类,继承自System.Web.UI.Page,代码如下: using System. ...

  6. 《Note --- Unreal 4 --- behavior tree》

    Web: https://docs.unrealengine.com/latest/INT/Engine/AI/BehaviorTrees/index.html Test project: D:\En ...

  7. "高大上" 名词整理

    大家在和朋友,同行交流时有没有经常遇到各种 "高大上" 的术语,很多词有没有把各位 “鸟哥” 们搞得一头雾水,现在我就把这些 "牛逼" 的东东都罗列一下, 大家 ...

  8. uva 1599 ideal path（好题）——yhx

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABGYAAAODCAYAAAD+ZwdMAAAgAElEQVR4nOy9L8/0ypH/Pa8givGiyC

  9. 解决 node-gyp rebuild 卡住 的问题

    node-gyp在编译前会首先尝试下载node的headers文件,像这样: gyp http GET https://nodejs.org/download/release/v6.8.1/node- ...

  10. Jenkins创建Maven项目及SSH部署

    前面我们已经安装了Jenkins的环境,以及配置好了jdk和maven.下面我们来看如何通过Jenkins将svn的项目进行打包和部署. 创建MAVEN项目 1.点击新建,输入项目名,选择" ...