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密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...
随机推荐
- SharePoint 2013 Designer 入门教程
SharePoint的使用中,SharePoint Designer是非常重要的工具,我们可以通过Designer设计页面.母版页,维护.管理站点,也可以定制列表表单.数据视图,设计工作流等等.下面总 ...
- 简单的学习心得：网易云课堂Android开发第五章SharedPreferences与文件管理
一.SharedPreferences (1)SharedPreferences能够用来保存一些属于基本数据类型的数据. (2)保存数据,删除数据都是由SharedPreferences的内部接口Ed ...
- java编码原理，java编码和解码问题
java的编码方式原理 java的JVM的缺省编码方式由系统的“本地语言环境”设置确定,和操作系统的类型无关 . 在JAVA源文件-->JAVAC-->Class-->Java--& ...
- java.lang.UnsatisfiedLinkError: %1 不是有效的 Win32 应用程序。
JNA 调用 dll 库时,保错: ///////////////// 通过 JNA 引入 DLL 库 //////////// /** * ID_FprCap.dll 负责指纹的采集, 指纹仪的初始 ...
- 萌新笔记——C++里创建 Trie字典树（中文词典）（三）（联想）
萌新做词典第三篇,做得不好,还请指正,谢谢大佬! 今天把词典的联想做好了,也是比较low的,还改了之前的查询.遍历等代码. Orz 一样地先放上运行结果: test1 ID : char : 件 w ...
- WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局
本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...
- Android客户端和服务器端数据交互
网上有很多例子来演示Android客户端和服务器端数据如何实现交互不过这些例子大多比较繁杂,对于初学者来说这是不利的,现在介绍几种代码简单.逻辑清晰的交互例子,本篇博客介绍第四种: 一.服务器端: 代 ...
- Java动态代理
代理模式 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类之间通常会存在关联关 ...
- ORACLE 利用 REPLACE函数替换字段字符串
REPLACE(string,s1,s2) string 希望被替换的字符或变量 s1 被替换的字符串 s2 要替换的字符串 SQL> select replace(he love you,he ...
- [No000083]文件与文件夹操作
#region Folder option 文件夹操作 /// <summary> /// 指定目录是否存在 /// </summary> /// <param name ...