HTML之JS学习
2016-11-17 00:01
162 查看
提示篇
原型
跑马灯测试
动态标签(与XML类似)
模仿五星好评
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="images/star1.png" /> <img id="1" src="images/star1.png" /> <img id="2" src="images/star1.png" /> <img id="3" src="images/star1.png" /> <img id="4" src="images/star1.png" /> <div id="text"></div> </body> </html>
相关文章推荐
- 学习HTML-Beautify.js
- HTML+JS学习体会
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第25讲_js系统函数_js函数调用方式_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第30讲_类和对象细节_创建对象的几种方式_js对象内存分析_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍 类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理
- CSS学习笔记-附加篇( CSS+JS实现的选项卡效果(html组件))
- js学习笔记——在html中嵌入脚本
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理
- 近期需要学习的js,html相关知识
- 用js+html+css+txt做的记单词游戏(妈妈再也不用担心我的学习~)
- 学习web开发,理解HTML,XHTML,XML,CSS,JS等技术的关系后,眼界会更宽(pu...
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理
- 学习web开发,理解HTML,XHTML,XML,CSS,JS等技术的关系后,眼界会更宽(publish by sunwei)
- JS操作的Html控件及其代码→学习笔记
- html的标签和js的学习
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第27讲_js一维数组_一维数组细节_学习笔记_源代码图解_PPT文档整理
- 学习js在线html(富文本,所见即所得)编辑器