当前位置:网站首页>JS small exercise ---- time sharing reminder and greeting, form password display hidden effect, text box focus event, closing advertisement
JS small exercise ---- time sharing reminder and greeting, form password display hidden effect, text box focus event, closing advertisement
2022-07-07 07:15:00 【Luqi zz】
Catalog
1. Time sharing reminder greeting
2. The form password shows the hidden effect
1. Time sharing reminder greeting
Judge according to different time of the system , So you need to use the date built-in object
Open the page in the morning and say : Good morning , Dear users ! 0-12
Open the page in the afternoon and say : Good afternoon, , Dear users !12-18
Open the page at night and say : Good evening , Dear users ! Greater than 18
Need one div Elements , Show different greetings , Modify the element content
<div>
<span id="greetTxt"></span>
<input type="button" name="" id="greet" value=" Show greetings " />
</div>
<script type="text/javascript">
// 1. Get elements
var greetTxt = document.getElementById('greetTxt');
var greet = document.getElementById('greet');
var str = '';
// 2. Get the current number of hours
greet.onclick = function(){
var date = new Date();
var hour = date.getHours();
// 3. Judge the number of hours Change the text message
if(hour<12){
str = ' Good morning , Have a cup of soymilk ';
}else if(hour<18){
str = ' Good noon , Have a stewed chicken and rice ';
}else{
str = ' Good evening , Go to a barbecue and have a beer ';
}
greetTxt.innerText = str;
}
</script>
effect :
2. The form password shows the hidden effect
css part
.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">
// Get elements
var eyeObj = document.querySelector('.password div');
// console.log(eyeObj);
// Switching method
// 2. Registration events The handler
var flag = false;
eyeObj.onclick = function() {
var passwordObj = document.getElementById('password');
flag = !flag;
if (flag) {
// Change the form type to file field
passwordObj.type = 'text';
// to div add hover attribute
eyeObj.className = 'hover';
} else {
passwordObj.type = 'password';
eyeObj.className = '';
}
}
effect :
3. Text box focus event
When the text box is clicked , The default text inside is hidden , Display text when the mouse leaves the text .
onfocus Get mouse focus trigger
onblur Lose mouse focus trigger
<input type="text" name="" id="txtinput" value=" Please enter text " onfocus="showTxt()" onblur="hideTxt()"/>
<script type="text/javascript">
var txtinput = document.getElementById('txtinput');
function showTxt(){
if(txtinput.value==' Please enter text '){
txtinput.value = '';
}
}
function hideTxt(){
if(txtinput.value==''){
txtinput.value = ' Please enter text ';
}
}
</script>
</body>
effect :
4. Close advertising
css part
*{
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:; solve a The problem of automatically refreshing the page of tag connection -->
<a href="javascript:;"> Close advertising </a>
<div> I'm an advertisement </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 = ' Close advertising ';
document.body.style.background='#fff';
}else{
adscon.style.display = 'none';
this.className='hover';
this.innerText = ' Display advertising ';
document.body.style.background='#000';
}
}
effect :
边栏推荐
- Freeswitch dials extension number source code tracking
- toRefs API 与 toRef Api
- .net core 访问不常见的静态文件类型(MIME 类型)
- MySQL SQL的完整处理流程
- PostgreSQL source code (59) analysis of transaction ID allocation and overflow judgment methods
- ViewModelProvider. Of obsolete solution
- $parent (get parent component) and $root (get root component)
- How can brand e-commerce grow against the trend? See the future here!
- [noi simulation] regional division (conclusion, structure)
- After the promotion, sales volume and flow are both. Is it really easy to relax?
猜你喜欢
LC 面试题 02.07. 链表相交 & LC142. 环形链表II
Network foundation - header, encapsulation and unpacking
MOS tube parameters μ A method of Cox
组件的嵌套和拆分
Jesd204b clock network
freeswitch拨打分机号源代码跟踪
Lm11 reconstruction of K-line and construction of timing trading strategy
[noi simulation] regional division (conclusion, structure)
Maze games based on JS
Basic introduction of JWT
随机推荐
$parent(获取父组件) 和 $root(获取根组件)
[explanation of JDBC and internal classes]
Algorithm --- bit count (kotlin)
leetcode 509. Fibonacci number
LC 面试题 02.07. 链表相交 & LC142. 环形链表II
js小练习----分时提醒问候、表单密码显示隐藏效果、文本框焦点事件、关闭广告
Unity C function notes
Maze games based on JS
mips uclibc 交叉编译ffmpeg,支持 G711A 编解码
toRefs API 与 toRef Api
Basic process of network transmission using tcp/ip four layer model
The currently released SKU (sales specification) information contains words that are suspected to have nothing to do with baby
多线程与高并发(9)——AQS其他同步组件(Semaphore、ReentrantReadWriteLock、Exchanger)
transform-origin属性详解
SolidWorks GB Library (steel profile library, including aluminum profile, aluminum tube and other structures) installation and use tutorial (generating aluminum profile as an example)
OOM(内存溢出)造成原因及解决方案
Matlab tips (30) nonlinear fitting lsqcurefit
Bus消息总线
Détailler le bleu dans les tâches de traduction automatique
Chinese and English instructions prosci LAG-3 recombinant protein