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 AsynTask处理返回数据和AsynTask使用get,post请求
Android是一个单线程模型,Android界面(UI)的绘制都只能在主线程中进行,如果在主线程中进行耗时的操作,就会影响UI的绘制和事件的响应.所以在android规定,不可在主线中进行耗时操作, ...
- iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ②)
距上一篇博客"APP引导页的高度集成 - DHGuidePageHUD - ①"的发布有一段时间了, 后来又在SDK中补充了一些新的内容进去但是一直没来得及跟大家分享, 今天来跟大 ...
- 个人作业week3——代码复审
1. 软件工程师的成长 感想 看了这么多博客,收获颇丰.一方面是对大牛们的计算机之路有了一定的了解,另一方面还是态度最重要,或者说用不用功最重要.这些博客里好些都是九几年或者零几年就开始学习编 ...
- VMware中CPU分配不合理以及License限制引起的SQL Scheduler不能用于查询处理
有一台SQL Server(SQL Server 2014 标准版)服务器中的scheduler_count与cpu_count不一致,如下截图所示: SELECT cpu_count , ...
- Storm UI 说明
原文: http://blog.sina.com.cn/s/blog_5c51172c0102v26g.html
- java.lang.UnsatisfiedLinkError: %1 不是有效的 Win32 应用程序。
JNA 调用 dll 库时,保错: ///////////////// 通过 JNA 引入 DLL 库 //////////// /** * ID_FprCap.dll 负责指纹的采集, 指纹仪的初始 ...
- URL_MODEL 2 不能访问 在APACHE服务器上的访问方式上去除index.php
thinkphp URL_MODEL=2,访问链接http://i.cnblogs.com/Online/index.html 报错: Not Found The requested URL /on ...
- 树莓派3B远程VNC的设置（包括开机启动）
可以说,现在很少有自带VNCserver的教程 因为之前 官方系统没有自带VNC 但是 现在 最新版的官方系统已经自带VNCserver 只需要在设置里启用一下,然后设置就可以用啦. 别的教程都是 ...
- C#/VB.NET 获取电脑属性（硬盘ID、硬盘容量、Cpu序列号、MAC地址、系统类型）
在开发过程中,经常需要获取电脑的一些属性,如获取硬盘ID/CPU序列号/MAC地址作为来加密字符串. 1.硬盘 在我查看网上一些文档时,发现很多人对硬盘序列号很模糊~ 什么叫硬盘序列号?指的是作为一个 ...
- C# 多线程之Task资料
博客 Stephen Toub From MicroSoft Crop. Stephen Cleary Parallelism in .NET 文章 It's All About the Sync ...