当前位置:网站首页>js小练习----分时提醒问候、表单密码显示隐藏效果、文本框焦点事件、关闭广告
js小练习----分时提醒问候、表单密码显示隐藏效果、文本框焦点事件、关闭广告
2022-07-07 03:22:00 【鹿蹊zz】
目录
1.分时提醒问候
根据系统不同时间来判断,所以需要用到日期内置对象
上午打开页面就说:上午好,尊敬的用户! 0-12
下午打开页面就说:下午好,尊敬的用户!12-18
晚上打开页面就说:晚上好,尊敬的用户! 大于18
需要一个div元素,显示不同问候语,修改元素内容即可
<div>
<span id="greetTxt"></span>
<input type="button" name="" id="greet" value="显示问候" />
</div>
<script type="text/javascript">
// 1.获取元素
var greetTxt = document.getElementById('greetTxt');
var greet = document.getElementById('greet');
var str = '';
// 2. 得到当前的小时数
greet.onclick = function(){
var date = new Date();
var hour = date.getHours();
// 3. 判断小时数 改变文字信息
if(hour<12){
str = '上午好,喝杯豆浆吧';
}else if(hour<18){
str = '中午好,吃个黄焖鸡米饭';
}else{
str = '晚上好,去吃个烧烤喝个啤酒';
}
greetTxt.innerText = str;
}
</script>
效果:
2.表单密码显示隐藏效果
css部分
.password{
width: 260px;
height: 30px;
position: relative;
}
.password div{
width: 20px;
height: 20px;
position: absolute;
right: 5px;
top:5px;
background: url(icon_1.png);
}
.password div.hover{
background: url(icon_2.png);
}
.password input{
width: 100%;
height: 30px;
line-height: 30px;
}
<div class="password">
<div></div>
<input type="password" name="" id="password" value="" />
</div>
<script type="text/javascript">
// 获取元素
var eyeObj = document.querySelector('.password div');
// console.log(eyeObj);
//开关法
// 2. 注册事件 处理程序
var flag = false;
eyeObj.onclick = function() {
var passwordObj = document.getElementById('password');
flag = !flag;
if (flag) {
//修改表单的类型为文件域
passwordObj.type = 'text';
//给div标签添加hover属性
eyeObj.className = 'hover';
} else {
passwordObj.type = 'password';
eyeObj.className = '';
}
}
效果:
3.文本框焦点事件
文本框点击时,里面的默认文字隐藏,鼠标离开文本时显示文字。
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
<input type="text" name="" id="txtinput" value="请输入文字" onfocus="showTxt()" onblur="hideTxt()"/>
<script type="text/javascript">
var txtinput = document.getElementById('txtinput');
function showTxt(){
if(txtinput.value=='请输入文字'){
txtinput.value = '';
}
}
function hideTxt(){
if(txtinput.value==''){
txtinput.value = '请输入文字';
}
}
</script>
</body>
效果:
4.关闭广告
css部分
*{
padding:0px;
margin: 0px;
}
a{
text-decoration: none;
}
.ads{
width: 150px;
position:fixed;
top: 100px;
left: 0px;
}
.ads a{
display: block;
width: 100%;
line-height: 35px;
background:green;
color: #fff;
text-align: center;
}
.ads div{
width: 100%;
height: 200px;
background-color: red;
color: #fff;
text-align: center;
font-size: 26px;
padding-top: 100px;
}
.ads a.hover{
width: 30px;
padding: 20px 0px;
height: auto;
line-height: 30px;
background-color: red;
}*{
padding:0px;
margin: 0px;
}
a{
text-decoration: none;
}
.ads{
width: 150px;
position:fixed;
top: 100px;
left: 0px;
}
.ads a{
display: block;
width: 100%;
line-height: 35px;
background:green;
color: #fff;
text-align: center;
}
.ads div{
width: 100%;
height: 200px;
background-color: red;
color: #fff;
text-align: center;
font-size: 26px;
padding-top: 100px;
}
.ads a.hover{
width: 30px;
padding: 20px 0px;
height: auto;
line-height: 30px;
background-color: red;
}
<div class="ads">
<!-- javascript:;解决a标签连接自动刷新页面的问题 -->
<a href="javascript:;">关闭广告</a>
<div>我是广告</div>
</div>
<script type="text/javascript">
var closeObj = document.querySelector('.ads a');
var adscon = document.querySelector('.ads div');
var flag =true;
closeObj.onclick = function(){
flag =!flag;//false
if(flag){
adscon.style.display = 'block';
this.className='';
this.innerText = '关闭广告';
document.body.style.background='#fff';
}else{
adscon.style.display = 'none';
this.className='hover';
this.innerText = '展示广告';
document.body.style.background='#000';
}
}
效果:
边栏推荐
- Jetpack Compose 远不止是一个UI框架这么简单~
- Four goals for the construction of intelligent safety risk management and control platform for hazardous chemical enterprises in Chemical Industry Park
- Please ask a question, flick Oracle CDC, read a table without update operation, and repeatedly read the full amount of data every ten seconds
- Basic process of network transmission using tcp/ip four layer model
- How DHCP router works
- 大促过后,销量与流量兼具,是否真的高枕无忧?
- How can clothing stores make profits?
- Basic introduction of JWT
- Graduation design game mall
- The latest trends of data asset management and data security at home and abroad
猜你喜欢
组件的嵌套和拆分
华为机试题素数伴侣
Prime partner of Huawei machine test questions
. Net 5 fluentftp connection FTP failure problem: this operation is only allowed using a successfully authenticated context
带你刷(牛客网)C语言百题(第一天)
Unity3d learning notes
Can 7-day zero foundation prove HCIA? Huawei certification system learning path sharing
Answer to the second stage of the assignment of "information security management and evaluation" of the higher vocational group of the 2018 Jiangsu Vocational College skills competition
大咖云集|NextArch基金会云开发Meetup来啦
$parent(获取父组件) 和 $root(获取根组件)
随机推荐
如何给目标机器人建模并仿真【数学/控制意义】
How to model and simulate the target robot [mathematical / control significance]
unity3d学习笔记
品牌·咨询标准化
Stack Title: nesting depth of valid parentheses
main函数在import语句中的特殊行为
Libcurl returns curlcode description
健身房如何提高竞争力?
Prime partner of Huawei machine test questions
使用TCP/IP四层模型进行网络传输的基本流程
The startup of MySQL installed in RPM mode of Linux system failed
[explanation of JDBC and internal classes]
一文带你了解静态路由的特点、目的及配置基本功能示例
根据IP获取地市
AddressSanitizer 技术初体验
Answer to the first stage of the assignment of "information security management and evaluation" of the higher vocational group of the 2018 Jiangsu Vocational College skills competition
How can brand e-commerce grow against the trend? See the future here!
Distributed ID solution
DHCP路由器工作原理
Implementation of AVL tree