返回2019-6-......登陆

2019-6-29 我的第一个js动效

辰晨2019-06-29 23:07:1555

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>我的第一个动效</title>

<style>

.fu{display:block;margin-top: 20px;}

button{width:80px;height:40px;border:none;background-color:#cde9ff;color:#3d5ac0;border-radius:20px;}

button:hover{background-color:#3d5ac0;color:#fff;}

.clear{clear:both;}

p{text-indent:2em;}

</style>

<script type="text/javascript">

function myradius(){

document.getElementById("myimg").style.borderRadius="20px";

}

function myzhong(){

document.getElementById("myimg").style.width="800px";

document.getElementById("myimg").style.height="auto";

}

function myxiao(){

document.getElementById("myimg").style.width="600px";

document.getElementById("myimg").style.height="auto";

}

function mymoren(){

document.getElementById("myimg").style.width="1000px";

document.getElementById("myimg").style.height="auto";

document.getElementById("myimg").style.borderRadius="0";

document.getElementById("myimg").src="http://www.php.cn/static/images/index_banner2.jpg";

}

function myshang(){

document.getElementById("myimg").src="http://www.php.cn/static/images/index_banner3.gif";

}

function myxia(){

document.getElementById("myimg").src="http://img.php.cn/upload/article/000/000/003/5b49b0e610f26951.jpg";

}

</script>

</head>

<body>

<div style="text-align: center;">

<div>

<button onclick="myradius()">圆角</button> 

<button onclick="myzhong()">中</button> 

<button onclick="myxiao()">小</button>

<button onclick="mymoren()">默认</button>

</div>

<div>

<img src="http://www.php.cn/static/images/index_banner2.jpg" alt="" id="myimg">

</div>

<div>

<button onclick="myshang()">上一张</button>

<button onclick="myxia()">下一张</button>

</div>

</div>

<div></div>

<div style="width:800px;background-color:#3d5ac0;margin:50px auto;color:#fff;padding:20px;">

<h2 style="text-align:center;">总结</h2>

<hr>

<p>1.if...else条件语句,只有if是可以不加花括号</p>

<p>2.for循环语句,初始化默认值、循环条件和步长三部分缺一不可</p>

<p>3.while循环与do while循环,不知道循环次数的情况下使用,二者区别是while先看条件再执行,do while反之且无论条件是否满足必然执行一次</p>

<p>4.switch...case语句是多重条件判断语句,用于多个值相等的比较,break跳出循环,default都不匹配执行</p>

<p>5.字符串相关函数: <br> 

[1]lenght属性可以返回字符长度 

[2]charAt返回一个字符值,是指定索引位置的值 

[3]indexOf指出子字符串的开始位置

[4]lastIndexOf指出最后一个子字符串的开始位置 

[5]substring(开始下标,结束)返回一个子字符串

[6]replace(要被替换的字符串,需要被替换成字符串):字符串替换函数

[7]concat可以连接俩两个或者多个字符串;

[8]substr(起始位置,长度)返回一个子字符串</p>

<p>类型转换函数

[1]string-0,字符串

[2]number.toString()

[3]parseInt(string)忽略非数字部分,从第一个字符开始找,找到非数字截止,只取整数部分,忽略小数

[4]parseFloat(string)把小数部分也取到

[5]number+""添加空字符串方法

</p>

<p>6.创建数组:var a=new Array(),var a=['php','html','web'],var a=Array(1,2,3,4……n);</p>

<p>7.concat()数组合并函数,join()将数组元素变成字符串,并且以指定分割符号分割,reverse()数组元素逆向排序,sort()数组元素按照一定规则排序(ASCLL字符顺序),splice()删除元素并向数组添加新元素,slice(起始位置,end)从数组中返回选定的元素,push()向数组末尾添加一个或者多个元素,并返回一个新数组的长度,pop() 删除并且返回数组的最后一个元素</p>

<p>8.系统函数(js的内置函数,可以直接拿过来使用的,自定义函数:自己创建的有特定功能的函数,function 函数名(参数1,参数2,……){函数体}</p>

<p>9.局部变量:在JavaScript函数内部声明,只能在函数体内部访问它;全局变量:在函数外声明的变量是全局变量(网页上所有的函数和脚本都可以使用)函数体外部的变量在函数外部使用</p>

<p>10.onfocus元素获得焦点,onblur元素失去焦点,onchange域的内容被改变,onclick当用户点击某个对象时调用的事件句柄,ondblclick当用户双击某个对象时调用的事件句柄,onkeydown某个键盘按键被按下,onkeyup某个键盘按键被松开,onkeypress某个键盘按键被按下并松开,onload一张页面或一幅图像完成加载,onmousedown鼠标按钮被按下,onmousemove鼠标被移动,onmouseout鼠标从某元素移开,onmouseover鼠标移到某元素之上,onmouseup鼠标按键被松开,onsubmit确认按钮被点击。</p>

</div>

</body>

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网