提示篇

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. 【搬砖】安卓入门(4)- Java开发编程基础--数组

    05.01_Java语言基础(数组概述和定义格式说明)(了解) A:为什么要有数组(容器) 为了存储同种数据类型的多个值 B:数组概念 数组是存储同一种数据类型多个元素的集合.也可以看成是一个容器. ...

  2. 百度地图隐藏BMKAnnotationView

    BMKAnnotationview.hidden 失效,只能移除Annotation BMKPinAnnotationView设置setHidden为yes时不能隐藏

  3. 安卓开发树形控件之ExpandableListView(一)

    这个例子非常简单,简单到一个初学者都能随便开发出来,今天的目的仅仅只是为了将效果实现出来,如果想深入这里有几篇非常不错的博客: Android 之ExpandableListView几个特殊的属性 h ...

  4. Laravel大型项目系列教程(二)之用户管理

    Laravel大型项目系列教程(二) 一.前言 本节教程将大概实现用户的注册.修改个人信息.管理用户功能. 二.Let's go 1.创建用户注册视图 $ php artisan generate:v ...

  5. iOS App 不支持http协议 App Transport Security has blocked a cleartext HTTP (http://)

    目前iOS已经不支持http协议了,不过可以通过info.plist设置允许 App Transport Security has blocked a cleartext HTTP (http://) ...

  6. Mac电脑如何读取Android手机上的文件

    问题 一般Android手机用usb数据线连接到windows操作系统的电脑上后,会自动将手机存储卡以移动存储的方式显示在电脑里. 但是如果操作系统是Mac的,就没有这个存储设备.问题来了,Mac电脑 ...

  7. 1、开篇:公司管理经验谈 - CEO之公司管理经验谈

    作为一家IT公司的CEO,我很高兴与大家通过博文的方式进行沟通交流.一方面能够将自己的成长之路以博文的方式记录下来,另一方面是能够与大家交朋友,与大家沟通公司管理方面的知识和经验. 首先,笔者在200 ...

  8. mysql笔记

    查看当前版本: SELECT VERSION(); 查看当前时间: SELECT NOW(); 查看当前当前用户: SELECT USER(); 创建数据库:CREATE DATABASE 数据库名字 ...

  9. Excel公式 提取文件路径后缀

    我们在代码中获取一个文件路径的后缀,是一个很简单的事. 如C#中,可以通过new FileInfo(filePath).Extension,或者Path.GetExtension(filePath)获 ...

  10. linux 下安装web开发环境

    以下使用 linux centos系统 一.JDK的安装 1.下载jdk-8u111-linux-x64.tar.gz 2.解压该文件,将解压后的文件复制到 /usr/local/jdk1.7 目录下 ...