JS(五)
感觉JS里面还是有很多小技巧的,知道套路了,其实实现起来其实也还没有想象中的那么复杂.不过我觉得还是要把所学的知识融会贯通吧,不能学了JS就忘了前面的知识,结合起来才会威力无穷.
1.跑马灯:弹弹弹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单行文字弹动</title>
<script type="text/javascript">
window.onload = function(){
window.setInterval(scrolling,10);
}
var str = "神奇的JavaScript";
var str_length = str.length;
var flag = true;
function scrolling(){
//寻找目标
var inpObj = document.getElementById("input");
if (flag) {
str = " "+str;
inpObj.value = str;
if (str.length==137) {flag=false;}
}else{
str = str.substr(1);
inpObj.value = str;
if (str.length==str_length) {flag=true;}
}
}
</script>
</head>
<body>
<input type="text" value="神奇的JavaScript" id="input" size="80" />
</body>
</html>
2.显示/隐藏选项卡,这个真是太简单.......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示隐藏功能</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
.box{
width:600px;
border: 1px solid #000;
margin: 100px auto;
}
.title{
width:100%;
height:30px;
border: 1px solid #000;
line-height: 30px;
}
</style>
<script type="text/javascript">
var flag = false;
function hid(){
var conObj = document.getElementById("content");
var button = document.getElementById("button");
if(flag){
conObj.style.display="block";
flag=false;
button.innerHTML = "隐藏";
}else{
conObj.style.display="none";
flag=true;
button.innerHTML = "显示";
}
}
</script>
</head>
<body>
<div class="box">
<div class="title">这里是一个标题<button onclick="hid()" id="button">隐藏</button></div>
<div id="content" style="display: block;">
<p>1.whatya you want for me.</p>
<p>2.I have loved you for a thousand years.</p>
<p>3.One step closer!</p>
<p>4.How did I fall in love with you?</p>
</div>
</div>
</body>
</html>
3.点出一个世界...
<!DOCTYPE html>
<html lang="en" onclick="clickPic(event)">
<head>
<meta charset="UTF-8">
<title>点到你开花</title>
<script type="text/javascript">
function clickPic(e){
var x = e.clientX;
var y = e.clientY;
var width = getRandom(10,100);
var random = getRandom(0,160);
var divObj = document.createElement("div");
var imgObj = document.createElement("img");
document.body.appendChild(divObj);
divObj.appendChild(imgObj);
if (random<10){imgObj.src = "images/P_00"+random+".jpg";}
else if (random<100){imgObj.src = "images/P_0"+random+".jpg";}
else if (random<160){imgObj.src = "images/P_"+random+".jpg";}
imgObj.width = width;
imgObj.style = "position:relative;left:0px;top:0px;"
divObj.style = "position:absolute;left:"+x+"px;top:"+y+"px;border:1px solid #ccc;padding:5px;border-radius:10px;box-shadow:5px 5px 10px gray;"
}
function getRandom(min,max){
return Math.floor(Math.random()*(max-min)+min);
}
</script>
</head>
<body> </body>
</html>
JS(五)的更多相关文章
- js五种设计模式说明与示例
第一种模式:js工厂模式 var lev=function(){ return "啊打"; }; function Parent(){ ...
- js 五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解
壹 ❀ 引 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安排明明白白的人应该不在少数(我就是 ...
- JS五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解(转载)
目录 壹 ❀ 引 贰 ❀ this默认绑定 叁 ❀ this隐式绑定 1.隐式绑定 2.隐式丢失 肆 ❀ this显式绑定 伍 ❀ new绑定 陆 ❀ this绑定优先级 柒 ❀ 箭头函数的this ...
- js五种设计模式
1.js工厂模式 var lev=function(){ return "嘿哈"; }; function Parent(){ var Child = new object(); ...
- sea.js五分钟上手
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架.本文给大家分享sea.js知识总结,感兴趣的朋友一起学习吧http://reactjs.cn/http://reactjs. ...
- js 五 jquery的使用,调用
4 this 关键字 this 表示当前函数或方法的调用者 1 全局函数由window调用,所以全局函数中的this 指的是window对象 2 事件处理函数中使用this,指的是当前事件的触发对象 ...
- js五种基本数据类型:string, number, boolean, null, undefined
/** * 五种基本数据类型:string, number, boolean, null, undefined */ // undefined // 声明变量foo,未声明变量bar var foo; ...
- node.js(五)字符串转换
1.stringify函数的基本用法 stringify函数的作用就是序列化对象,也就是说将对象类型转换成一个字符串类型(默认的分割符("&")和分配符("=&q ...
- 面试题:实现一个方法clone;可以对js五种数据类型进行值复制
//先来方法的代码function clone(obj) { var copy; switch(typeof obj){ case 'number': case 'string': case 'boo ...
随机推荐
- Android文档资源大放送 感兴趣的话可以网盘下载(个人收集)
Google.Android.SDK开发范例大全.第3版源码.rar http://pan.baidu.com/s/1c0epYzm 精通Android 3中文版(Pro Android 3).pdf ...
- 在top命令下kill和renice进程
For common process management tasks, top is so great because it gives an overview of the most active ...
- Windows下将硬盘由MBR转为GPT
打开命令提示符,输入 diskpart 进入diskpart提示符.Win7/Vista用户可以直接在开始菜单的搜索框中输入diskpart回车即可打开diskpart提示符. 在diskpart提示 ...
- JavaScript 浮点数运算 精度问题
JavaScript小数在做四则运算时,精度会丢失,这会在项目中引起诸多不便,先请看下面脚本. //加减 <script type="text/javascript" lan ...
- Cannot modify header information - headers already sent by
有时候你在使用 header("Location: http://localhost/myblog/index.php/manager/listview");的时候会出现这个问题, ...
- oracle的一知半解
这里只讲第一次开发运用oracle数据库的.net程序遇到问题: 1.程序与oracle数据库在同一台的服务器,貌似设置好连接字符串就可以直接访问( 需要主要的问题: 字符串格式:Data Sourc ...
- c-整型家族(integer family)
C中,整型有: characters, short integer, integer, long integer 看起来,long integer要比short integer大,但是这也是不一定的. ...
- iOS8中添加的extensions总结(四)——Action扩展
Action扩展 注:此教程来源于http://www.raywenderlich.com的<iOS8 by Tutorials> 1.准备 本次教程利用网站bitly.com进行 bit ...
- iOS9中通过UIStackView实现类似大众点评中的效果图
效果图如下: 实现思路 整体可以看做为一个大的UIStackView(排列方式水平)包括一个子UIStackView(排列方式垂直),其中左边包括一个图片,右边的UIStackView中可以看做包括三 ...
- PHP防注入转义功能
PHP addslashes() 函数 $str = addslashes('Shanghai is the "biggest" city in China.'); echo($s ...