整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、HTML
<img id="img1" src="luban.jpg" alt="" />
二、CSS
#img1{
opacity:0.3;
}
三、javascript
window.onload=function(){
var oImg=document.getElementById('img1');
oImg.onmouseover=function(){
startMove(100);
}
oImg.onmouseout=function(){
startMove(30);
}
}
var opac=30;
var timer=null;
fuicntion startMove(iTarget){
var oImg=document.getElementById('img1');
clearInterval(timer);
var iSpeed=0;
timer=setInterval(function(){
if(opac<iTarget){
iSpeed=1;
}else{
iSpeed=-1;
}
if(opac==iTarget){
clearInterval(timer);
}else{
opac+=iSpeed;
oImg.style.opacity=opac/100;
},30)
四、最终效果
ttps://www.w3school.com.cn/js/index.asp
1.JavaScript 事件
HTML事件是发生在HTML元素上的“事情”.
当在HTML页面中使用JavaScript时，JavaScript能够“应对”这些事件。
通过JavaScript代码，向HTML元素添加事件处理程序。
格式1：
<html 元素 事件名称=“JavaScript代码对应时间的处理程序”>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test1(){
alert("按钮的点击事件被触发")
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="test1();"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test1(){
alert("按钮的点击事件被触发")
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="('按钮的点击事件被处罚');" /><br>
<h2>通常我们都是在对应事件的双引号中编写处理程序，处理程序中如果出现双引号改成单引号</h2>
<input type="button" value="按钮" onclick="test1()" /><br>
</body>
</html>
常见的 HTML 事件
下面是一些常见的 HTML 事件：
onload–浏览器已经完成页面加载[页面初始化事件]
onclick–用户点击了 HTML 元素
onmouseover–用户把鼠标移动到 HTML 元素上[鼠标进入]
onmouseout–用户把鼠标移开 HTML 元素[鼠标移出]
onchange–HTML 元素已被改变
onfocus—元素获得焦点。
onblur—元素失去焦点。
onkeydown–用户按下键盘按键
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test1(){
alert("页面初始化事件被触发");
}
function test2(){
alert("元素点击事件被触发");
}
function testover(){
document.getElementById("img1").width=document.getElementById("img1").width+100;
document.getElementById("img1").height=document.getElementById("img1").height+100;
}
function testout(){
document.getElementById("img1").width=100;
document.getElementById("img1").height=100;
}
function testchange(){
var inputvalue=document.getElementById("text1").value;
if(inputvalue==""){
alert("用户名不能为空");
}
if(inputvalue=="zhangsan"){
document.getElementById("span1").innerHTML="<font color='red'>该用户名已经存在请重写输入!</font>";
}
}
function testblur(){
var inputvalue=document.getElementById("text1").value;
if(inputvalue==""){
alert("用户名不能为空");
}
if(inputvalue=="zhangsan"){
document.getElementById("span1").innerHTML="<font color='red'>该用户名已经存在请重写输入!</font>";
}
}
function testfocus(){
document.getElementById("span1").innerHTML="";
document.getElementById("text1").value="";
}
function testkeydown(e){
if(e.keyCode==38 ){
alert("向上移动");
}
if(e.keyCode==37){
alert("向左移动");
}
if(e.keyCode==39){
alert("向右移动");
}
if(e.keyCode==40){
alert("向下移动");
}
if(e.keyCode==32){
alert("暂停");
}
}
</script>
</head>
<body onload="test1();" onkeydown="testkeydown(even);">
<img id="img1" src="13.jpg" width="100px" height="100px" onclick="test2();"
onmouseover="testover();" onmouseout="textout();"
>
<input id="text1" type="text" value="请输入用户名" onchange="testchange();"
onfocus="testfocus();"/>
<span id="span1"></span>
-->
<input type="text" id="text1" value="请输入用户名" onblur="testblur();"
onfocus="testfocus();"/>
<span id="span1">
</span>
</body>
</html>
onsubmit—表单提交事件【作用在form表单上】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function testsubmit(){
var textvalue=document.getElementById("text1").value;
if(textvalue==""){
alert("用户名不能为空！");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="test" method="get" onsubmit="return testsubmit();">
<input type="text" id="text1" value="请输入用户名" />
<input type="password" />
<input type="submit" value="登录" />
</form>
</body>
</html>
1.onsubmit作用在form表单上 return javascript函数；
2.javascript函数的返回值return 的是false表示不会向form表单anction属性指定的后端处理程序提交表单数据，如果是true表示会向form表单anction属性指定的后端处理程序提交表单数据。
2、JavaScript 字符串
JavaScript 字符串是引号中的零个或多个字符。用于存储和操作文本。
var x=“Bill Gates”; //创建字符串变量【没有可供操作的的方法和属性】
var y=new String(“hello”); //创建字符串对象【可供操作的的方法和属性】
当创建的字符串变量调用提供的方法和属性的时候，字符串变量会被自动转换成字符串对象。
//创建字符串变量
var x=“Bill Gates”;
x.substring(0,5); //此时x表示的字符串变量会被自动转换成字符串对象。
方法和属性
length 属性–返回字符串的长度
indexOf(string) 方法返回字符串中指定文本首次出现的索引（位置）
lastIndexOf(string) 方法返回指定文本在字符串中最后一次出现的索引
JavaScript 从零计算位置。
0 是字符串中的第一个位置，1 是第二个，2 是第三个 …
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
slice(start,end) 方法提取字符串的某个部分并在新字符串中返回被提取的部分
参数为负数
substring(start, end)方法提取字符串的某个部分并在新字符串中返回被提取的部分
参数不能为负数
substr(start, length)方法提取字符串的某个部分并在新字符串中返回被提取的部分
第二参数是个数，不是结束位置。
replace(old,new) 方法用另一个值替换在字符串中指定的值
toUpperCase() 把字符串转换为大写：
toLowerCase() 把字符串转换为小写：
trim() 方法删除字符串两端的空白符：
charAt() 方法返回字符串中指定下标（位置）的字符串：
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：
split(op) 将字符串通过指定的分隔符号拆分成字符串数组：
日，外面天气越来越冷，由于小白办公室是阳面，因此窗户口总能聚集各式各样前来晒太阳的低头族。看着他们，小白也想懒洋洋的靠在窗口，看着手机放松放松自己。放松的想法在小白脑海中仅仅存在了十几秒中后，就彻底消失在虚空之中了。小白发现自从认真学html5开始到现在，居然把没事就想拿出手机的习惯都给改掉了。处理完手头的事情后，小白又去找老朱，看看今天会学什么方面的知识。
“小白，这几天连续学习累不累？”
“不累，朱哥，今天我需要了解哪方面的知识呢？”
“今天，我们看看常用的鼠标事件吧！你平时上网最常用到的鼠标事件是哪几个？”
小白想了想：“我打开链接需要点击链接，所以点击事件算是一个，平时浏览网页的时候，如果是图片轮换鼠标移到上面图片轮换就会停住，是不是鼠标移上去也算一个事件？”
“恩，没错，我们最常用到的事件是鼠标的点击事件（click），另外鼠标移到某个容器上面（mouseover）、鼠标离开某个容器时（mouseout）的事件也会经常遇到，比如鼠标移动到某个容器上面，让这个容器css样式发生改变，或者让他的html内容发生改变，离开后恢复原来的状态。通过jQuery改变容器的css样式过两天我再跟你说，今天我们还是通过处理容器的html内容进行鼠标事件的练习吧！还是用你之前那个原始页面吧！”
“有时候为了方便，我们会在某个容器上直接写鼠标事件，比如onclick='js代码'，比如在id为main的div上面可以这样写。”
“小白，你看，main上面我写了一个onclick="clickme()"，这个意思就是说，当点击main容器的时候去执行clickme函数，clickme函数我在下方的js代码中进行了定义，在这里我用了一个小技巧，用mainHtml存储main原始的文本内容，每调用一次clickme函数num都会加1。在clickme函数内部让main的html内容发生改变，所以你可以看到这样一个效果。”
“现在我们再来看一下鼠标移入和移出事件。”
“我在main上面写了鼠标移动到main上面的事件：onmouseover="overme()"，和鼠标移出事件：onmouseout="outme()"，他们分别执行overme和outme函数。看一下效果：”
“哇，好神奇！我现在去练习！”
“小白，不要着急，我们只说了在标签上面加事件，你忘了我们的jQuery了？事件写到标签上有时会导致代码维护上的麻烦，所以我们还有一种更好的办法，就是写到js区域里面，这样无论是你自己修改代码，还是别人看代码都会一目了然。在jQuery中使用事件你需要调用click方法，比如我们把之前的click事件改成jquery方式：”
“怎么样？通过$("#main").click(clickme)就可以实现之前在容器上写事件的方法，这样做还有一个好处，假如页面上有很多的容器，有时你可能希望换一个其他容器触发clickme，这时只需换一下jQuery选择器的选择方式就可以了！jQuery里的鼠标移入事件方法是mouseover，移出是mouseout，你试着把之前的鼠标移入移出改成jQuery方式实现吧！”
“没问题，我现在就去～～”
想学H5的朋友可以关注老炉，您的关注是我持续更新《小白H5成长之路》的动力！
*请认真填写需求信息，我们会在24小时内与您取得联系。
