HTML之JS学习
提示篇
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学习的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- js学习之变量、作用域和内存问题
js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...
- 【Knockout.js 学习体验之旅】（3）模板绑定
本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】（2）花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】（1）ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- js学习篇1--数组
javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- NODE.JS学习的常见误区及四大名著
NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang ...
- Node.js学习系列总索引
Node.js学习系列也积累了一些了,建个总索引方便相互交流学习,后面会持续更新^_^! 尽量写些和实战相关的,不讲太多大道理... Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- ...
- 【入门必备】最佳的 Node.js 学习教程和资料书籍
Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...
随机推荐
- 使用IdleTest进行TDD单元测试驱动开发演练（1）
[前言] 开发工具:Visual Studio 2012 测试库:Visual Studio 2012自带的MSTest DI框架:Unity 数据持久层:Entity Framework 前端UI: ...
- ViewPager与Tab结合使用
我们有时候需要 标题页卡与ViewPager结合使用,其实原理也很简单. 不过工程中要引入android-support-design.jar 首先是布局文件 <android.support. ...
- Hibernate 系列 06 - 对象在JVM中的生命周期
引导目录: Hibernate 系列教程 目录 Java对象通过new命令进行创建,Java虚拟机(Java Virtual Machine,JVM)会为新的Java对象在内存中开辟一个新空间以存放次 ...
- SQL Server 2012 新特性：新增和修改函数
转换函数 1.PARSE Parse是把字符串类型转化为想要的类型,看看和convert和cast的区别 SELECT PARSE ('2.111111' AS f ...
- Oracle的SQL基础
1.了解SQL的种类 (1)DDL 数据定义语言:定义数据库中数据要如何存储的,包括对数据库对象的创建(create)修改(alter)删除(drop)的操作,这些对象主要有数据库,数据表,视图,索引 ...
- 基于jquery实现图片拖动和曲线拖放
功能:图片的拖动.曲线的拖放和绘制 一. 准备工作 1. 点击此下载相关的文档 二. 在浏览器中运行 dragDrop.html 文件,即可看到效果 三. 效果图
- ERROR 2003 (HY000): Can't connect to MySQL server on 'ip address' (111)的处理办法
远程连接mysql数据库时可以使用以下指令 mysql -h 192.168.1.104 -u root -p 如果是初次安装mysql,需要将所有/etc/mysql/内的所有配置文件的bind-a ...
- WPF 自定义搜索框
控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1.先定义一个Rectangle作为背景 2. ...
- ajax 允许跨域html头设置
"Access-Control-Allow-Origin"= "*" "Access-Control-Allow-Headers"= &qu ...
- POJ 2739. Sum of Consecutive Prime Numbers
Sum of Consecutive Prime Numbers Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 20050 ...