![]() |
您当前所在位置:首页 > 中心动态 | >> |
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] |