提示篇

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. Nessus的安装（Linux）

    Nessus有三种安装方式: 1.源文件安装 源文件安装是最复杂的安装方式,用此方式安装可以修改配置参数. 2.rpm安装 rpm安装比起源文件安装更简单一些,它已经把一些底层的东西写好了,用户只要按 ...

  2. android 自定义控件——（二）圆形按钮，圆形View

    ----------------------------------↓↓圆形按钮,圆形View(源代码下有属性解释)↓↓---------------------------------------- ...

  3. Elixir 1.0 Release

    如期而至,9.9苹果产品发布会之后,紧接着在今天(教师节)我们终于等到了Elixir 1.0,苹果范儿的说法是:Now,Elixir 1.0 is here   注意:官网上的链接说明之类还没有更新过 ...

  4. Eclipse中JAR System library 没有怎么添加？

    1.打开  >>  Eclipse 2.右击项目   >>  Build path  >>  Configure Build path  如图1: 图1 3.进入 ...

  5. iOS系列 基础篇 08 文本与键盘

    iOS系列 基础篇 08 文本与键盘 目录: 1. 扯扯犊子 2. TextField 3. TextView 4. 键盘的打开和关闭 5. 打开/关闭键盘的通知 6. 键盘的种类 7. 最后再扯两句 ...

  6. Hibernate 系列 08 - 对象识别机制

    目录导读: Hibernate 系列 学习笔记 目录 本篇目录: 为了区别不同的对象,有两种识别方法: 1. 内存地址识别(“==”号识别) 2. equals()和hashCode()识别 1. 以 ...

  7. 办公OA的登陆界面..

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. 测试EntityFramework，Z.EntityFramework.Extensions，原生语句在不同的查询中的表现。原来池化与非池化设定是有巨大的影响的。

    Insert测试,只测试1000条的情况,多了在实际的项目中应该就要另行处理了. using System; using System.Collections.Generic; using Syste ...

  9. node.js express 4.x 安装指南

    前几天express 推出了4.0,得知这个消息,自己尝试了一下,突然发现用以前的文档上的操作出现了各种问题.结果只能去看文档,现在在这个给大家分享下4.0版本的安装. 先说下如果需要用express ...

  10. [No000094]SVN学习笔记4-版本库概念与部分日常操作

    基本概念 版本库 Subversion 使用集中的数据库,它包含了所有的版本控制文件及其完整历史.这个数据库就是版本库.版本库通常位于运行 Subversion 服务器的文件服务器上,向 Subver ...