js小练习----分时提醒问候、表单密码显示隐藏效果、文本框焦点事件、关闭广告

目录

1.分时提醒问候

2.表单密码显示隐藏效果

3.文本框焦点事件

4.关闭广告

---

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';
				}
			}

效果: