JS练手案例
keyCode判断用户按下哪个键 模拟京东按键输入内容 模拟京东快递单查询 发送短信案例
< ! DOCTYPE html>
< html lang = "en" >
< head>
< meta charset = "UTF-8" >
< title> keyCode 判断用户按下哪个键< /title>
< /head>
< body>
< script>
//键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
// console.log( e.keyCode) ;
/*
*1、我们的keyup 和 keydown 事件不区别字母大小写 a 和 A 得到的都是65
* 2 、我们的keypress 事件区分字母大小写 a 和 A 得到的都是65
* */
document.addEventListener( 'keyup' ,function ( e) {
console.log( e.keyCode) ;
//我们可以利用keyCode返回的ASCII码值来判断用户按下了哪个键
if( e.keyCode == = 65 ) {
alert( '您按下的a键' ) ;
} else {
alert( '您没有按下a键' ) ;
}
} )
document.addEventListener( 'keypress' ,function( e) {
console.log( 'press:' + e.keyCode) ;
} )
< /script>
< /body>
< /html>
< ! DOCTYPE html>
< html lang = "en" >
< head>
< meta charset = "UTF-8" >
< title> 模拟京东按键输入内容< /title>
< /head>
< body>
< input type = "text" >
< script>
/*
* 核心思路：检测用户是否按下了s键，如果按下了s键，就
* 把光标定位到搜索框里面
* 使用键盘事件对象里面的keyCode判断用户按下的是否搜索s键
* 搜索框获得焦点：使用js 里面的focus（）方法
* */
var search = document.querySelector( 'input' ) ;
document.addEventListener( 'keyup' ,function( e) {
if( e.keyCode == = 83 ) {
search.focus( ) ;
}
} )
< /script>
< /body>
< /html>
< ! DOCTYPE html>
< html lang = "en" >
< head>
< meta charset = "UTF-8" >
< title> 模拟京东快递单查询< /title>
< style>
.search {
position: relative;
width: 178px;
margin: 100px;
}
.con {
display: none;
position: absolute;
top:-40px;
width: 171px;
border: 1px solid rgba( 0 , 0 , 0 , .2) ;
box-shadow: 0 2px 4px rgba( 0 , 0 , 0 , .2) ;
padding: 5px 0 ;
font-size: 18px;
line-height: 20px;
color:
}
.con::before {
content:'' ;
width: 0 ;
height: 0 ;
position: absolute;
top:28px;
left:18px;
border: 8px solid
border-style: solid dashed dashed;
border-color:
}
< /style>
< /head>
< body>
< div class = "search" >
< div class = "con" > 12 3 <>
< input type = "text" placeholder = "请输入您的快递单号" class = "jd" >
< /div>
< script>
//快递单号输入内容时，上面的大号字体盒子（con）显示（这里面的字号更大）
//表单检测用户输入：给表单添加键盘事件
//同时把快递单号里面的值（value) 获取过来赋值给con盒子（innerText）作为内容
//如果快递单号里面的内容为空，则隐藏大号字体盒子（con）盒子
var con = document.querySelector( '.con' ) ;
var jd_input = document.querySelector( '.jd' ) ;
jd_input.addEventListener( 'keyup' ,function ( ) {
if( this.value == '' ) {
con.style.display = 'none' ;
} else {
con.style.display = 'block' ;
con.innerText = this.value;
}
} )
//当我们失去焦点，就隐藏这个con盒子
jd_input.addEventListener( 'blur' ,function ( ) {
con.style.display = 'none' ;
} )
//当我们获得焦点，就显示这个con盒子
jd_input.addEventListener( 'focus' ,function ( evt) {
if( this.value != = '' ) {
con.style.display = 'block' ;
}
} )
< /script>
< /body>
< /html>
< ! DOCTYPE html>
< html lang = "en" >
< head>
< meta charset = "UTF-8" >
< title> 发送短信案例< /title>
< /head>
< body>
手机号码：< input type = "number" > < button> 发送< /button>
< script>
/*
* 按钮点击之后，会禁用disable 为true
* 同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改
* 里面秒数时有变化的，因此需要用到定时器
* 定义一个变量，在定时器里面，不断递减
* 如果变量为0说明到了时间，我们需要停止定时，并且复原按钮初始状态
* */
var btn = document.querySelector( 'button' ) ;
var time = 30 ; //定义剩下的秒数
btn.addEventListener( 'click' ,function ( ) {
btn.disabled = true ;
var timer = setInterval( function ( ) {
if( time == 0 ) {
//清除定时器和复原按钮
clearInterval( timer) ;
btn.disabled = false ;
btn.innerHTML = '发送' ;
tiem = 3 ; //这个3需要重新开始
} else {
btn.innerHTML = '还剩下' + time + '秒' ;
time--;
}
} ,1000) ;
} )
< /script>
< /body>
< /html>
