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密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...
随机推荐
- android 自定义控件——（五）按钮点击变色
----------------------------------按钮点击变色(源代码下有属性解释)------------------------------------------------- ...
- ContentProvider中央档案馆,以及获取联系人电话的示例
Android官方文档介绍的数据存储方式共有五种,sqlite,SharedPreferences,网络存储,外储存储,文件存储,但是这些数据都无法进行共享,那么我们就引入了今天的主角:Content ...
- 不重新编译php安装配置eAccelerator
eAccelerator属于一个免费的开源php加速.优化.编译和动态缓存项目,原理和apc类似,都是通过缓存php编译后的opcode代码来提高php脚本的执行性能,而且eAccelerator本身 ...
- Unsupported major.minor version 51.0错误
错误原因:用jdk7编译的class文件放到基于jdk6运行在tomcat之中,就会报这个错 解决方法:项目------>右键------>属性------>Java Compile ...
- sqlserver中根据表中的配置概率取到数据
create proc pr_zhanglei_test1 /*功能描述: 根据t_zhanglei_test1中perc设置的概率,取到相应数据old_id */ as declare @per ...
- python迭代器实现斐波拉契求值
斐波那契数列(Fibonacci sequence),又称黄金分割数列,也称为"兔子数列":F(0)=0,F(1)=1,F(n)=F(n-1)+F(n-2)(n≥2,n∈N*).例 ...
- 在Ubuntu Server 14.04中搭建FTP服务器(VMWare)
自己搭建ftp服务器,方便主机与虚拟机中的Ubuntu传输文件. 选用的ftp软件为vsftpd. 1.命令行: sudo apt-get install vsftpd 2.安装完配置: vsftpd ...
- BZOJ 1251: 序列终结者 [splay]
1251: 序列终结者 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 3778 Solved: 1583[Submit][Status][Discu ...
- c# float显示时保存一位小数
UI显示时候,需求保留一位小数 //保留一位小数 参考: http://blog.sina.com.cn/s/blog_620531730100kfz6.html float ff = 1.01f; ...
- [LeetCode] Spiral Matrix II 螺旋矩阵之二
Given an integer n, generate a square matrix filled with elements from 1 to n2 in spiral order. For ...