 |
您当前所在位置：首页 > 中心动态 | >> |
| javascript学习笔记:js的常见事件 |
 |
javascript学习课程报名咨询：常州文化宫校区：0519-69886161、新北校区：0519-68877558！
1、js常见事件
A、onclick、ondblclick
B、onmouseover、onmouseout
例子：
<p>
<input type="button" value="单击一下试试" onclick="this.value='双击一下试试'" ondblclick="this.value='单击一下试试'"/>
</p>
<p>
<input type="button" value="鼠标移上来" onmouseover="this.value='鼠标移出去';this.style.color='#F00';this.style.fontWeight='bold'"
onmouseout="this.value='鼠标移上来';this.style.color='#00F';this.style.fontWeight='normal'" style="color:#00F"/>
</p>
例子：利用事件调用函数
<script type="text/javascript">
function on(b){
b.value='鼠标移出去';
b.style.color='#F00';
b.style.fontWeight='bold';
}
function out(b){
b.value='鼠标移上来';
b.style.color='#00F';
b.style.fontWeight='normal';
}
</script>
<p>
<input type="button" value="鼠标移上来" onmouseover="on(this)" onmouseout="out(this)" style="color:#00F">
</p>
例子：
<p>
<img src="images/baby_r1_c1.jpg" onmouseover="this.src='images/baby_r1_c3.jpg'" onmouseout="this.src='images/baby_r1_c1.jpg'"/>
</p>
<p>
<a href="#" onmouseover="this.style.color='#F00';this.style.textDecoration='underline'"
onmouseout="this.style.color='green';this.style.textDecoration='none'">百度一下</a>
C、onmousedown、onmouseup：鼠标按下、松开
<script type="text/javascript">
//鼠标按下修改样式
function change(p){
p.style.fontSize = "20px";
p.style.color = "#F00";
p.style.backgroundColor = "yellow";
}
//鼠标松开恢复样式
function reset(t){
t.style.fontSize = "15px";
t.style.color = "#000";
t.style.backgroundColor = "#FFF";
}
</script>
<p onmousedown="change(this)" onmouseout="reset(this)">
床前明月光；
</p>
<p onmousedown="change(this)" onmouseout="reset(this)">
疑似地上霜；
</p>
<p onmousedown="change(this)" onmouseout="reset(this)">
举头望明月；
</p>
<p onmousedown="change(this)" onmouseout="reset(this)">
低头思故乡！
</p>
D、onchange：下拉菜单的值被修改
请选择网页的背景颜色：
<select onchange="document.body.style.backgroundColor=this.value">
<option value="#FFF">请选择</option>
<option value="#F00">-落日红-</option>
<option value="orange">-大漠黄-</option>
<option value="#0F0">-清新绿-</option>
</select>
E、onblur、onfocus：得到焦点及失去焦点
例子：
<style type="text/css">
.email{
color:#CCC;
}
/* 正确输入后看到的样式 */
.right_email{
color:#000;
border:1px solid #CCC;
background-color:#FFF;
}
</style>
<script type="text/javascript">
//得到焦点清空输入框的值
function emptyText(t){
//如果值是默认值
if(t.value == "请输入您的邮箱"){
t.value = "";
}
t.style.color = "#000";
}
//失去焦点检验值是否填写
function check(t){
//如果值没有填写
if(t.value == ""){
t.value = "请输入您的邮箱";
t.style.color = "#CCC";
t.style.border = "1px solid #F00";
t.style.backgroundColor = "pink";
}else{
//如果填写了，则不能有错误警告的样式
t.style.color = "#000";
t.style.border = "1px solid #CCC";
t.style.backgroundColor = "#FFF";
}
}
</script>
邮箱：<input type="text" name="email" value="请输入您的邮箱" class="email"
onfocus="emptyText(this)" onblur="check(this)"/>
修改一个元素对应的class的值（引用的样式表的类）：元素.className = "";
注意优先级的问题，这样修改相当于修改内部样式表，是不能覆盖内嵌样式表的值！
2、js中获取网页元素：document.getElementById()
例子：
<style type="text/css">
.s1{
color:#000;
background-color:#FFF;
font-size:15px;
}
.s2{
color:#F00;
background-color:yellow;
font-size:50px;
}
</style>
<input type="button" value="点一下" onclick="document.getElementById('p01').className = 's2'"
ondblclick="document.getElementById('p01').className = 's1'"/>
<p id="p01" class="s1">
床前明月光，疑似地上霜！
</p>
例子：
<style type="text/css">
.num{
width:60px;
text-align:center;
}
</style>
<script type="text/javascript">
//计算
function calc(){
var n1 = document.getElementById("num1");//获取id="num1"的输入框
var n2 = document.getElementById("num2");
//将值转成整数
var x = parseInt(n1.value);
var y = parseInt(n2.value);
var r = document.getElementById("result");
var a = document.getElementById("action");//运算符
//如果两个数组都填写
if(n1.value != "" && n2.value != ""){
if(a.value == "+"){
r.value = x + y;
}else if(a.value == "-"){
r.value = x - y;
}else if(a.value == "*"){
r.value = x * y;
}else{
r.value = x / y;
}
}else{
alert("请输入正确的需要运算的数值！");
}
}
</script>
<input type="text" name="num1" class="num" id="num1"/>
<select name="action" id="action">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="num2" class="num" id="num2"/>
<input type="button" value="=" onclick="calc()"/>
<input type="text" name="result" class="num" id="result"/>
3、js向网页中写内容：innerHTML
例子：
<script type="text/javascript">
//显示内容
function show(t){
if(t.value == "显示输入框"){
document.getElementById("p01").innerHTML = "用户名：<input type='text' name='uname'>";
t.value = "隐藏输入框";
}else if(t.value == "隐藏输入框"){
document.getElementById("p01").innerHTML = "";
t.value = "显示输入框";
}
}
</script>
<input type="button" value="显示输入框" onclick="show(this)"/>
<p id="p01">
</p>
例子：微博发布的仿制
a、输入框默认灰色，填写时橙色，离开时灰色
b、如果没有填写内容，发布按钮默认不能点击，填写了才能点击，超出140个文字的范围也不能点击
c、实时计数功能，记录还能输入多少字符，已经超出多少字符
<script type="text/javascript">
//显示内容
function calc(t){
//统计输入字数
var len = t.value.length;
var tips = document.getElementById("tips");//span
//如果没有超出范围
if(len <= 140){
tips.innerHTML = "还能输入<b>" + (140 - len) + "</b>字";
}else{
tips.innerHTML = "已超出<span style='color:red'><b>" + (len - 140) + "</b></span>字";
}
//检测如果字数超过，或者没有填写，则按钮不能使用
if(len == 0 || len > 140){
document.getElementById("bt01").disabled = "disabled";
}else{
document.getElementById("bt01").disabled = false;
}
}
</script>
<p>
微博内容：<span id="tips">还能输入<b>140</b>字</span>
</p>
<textarea class="weibo" onkeyup="calc(this)"></textarea>
<p>
<input type="button" value="发布" id="bt01" disabled="disabled"/>
</p>
注意：onkeyup键盘键位弹起事件!
 | javascript学习笔记:js的基本运算 | [2016-1-10] |
| 【常州CAD软件应用培训班】学员培训优秀案例展示 | [2013-12-12] |
| 【常州东方博宜多媒体课程培训】学员优秀作品展示 | [2013-12-12] |
| 【常州营销培训】网络营销测试题 | [2013-9-25] |
| spring从入门到精通：spring基础知识——常州电脑培训 | [2013-5-9] |
| 猴子爬树和猫追老鼠的逻辑思考题 | [2012-7-1] |
| Android开发之Service实例——常州电脑培训 | [2012-6-29] |
| 怎样提升简历合格率？——常州电脑培训 | [2012-6-26] |
