Web前端——JavaScript练习

Js练习

显示和隐藏，改变display属性(点击查看图片)

关键代码：

e.style.display = "block";
e.style.display = "none";

源码：

    
        
        
        
    
    
        查看图片
        隐藏图片
        

        
    

querySelector三种方法介绍

鼠标滑动更改内容 onmouseover

关键：
onmouse事件

    
        
        
        
    
    
        

            蓝色
            绿色
            

        

        

        
    

时间自动更新

关键代码：
Js中内置了Date对象

• getFullYear 年
• getMonth 月
• getDate 日
• getHours 小时
• getMinutes 分钟
• getSeconds 秒
• getDay 星期几（0-6） 星期日为0

方法	说明
getFullYear()	从 Date 对象以四位数字返回年份。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。

 var now = new Date();

 var time =now.getFullYear() + '年' + now.getMonth() + '月'
     + now.getDate() + '日'
     +now.getHours() +'时' + now.getMinutes() +'分' + now.getSeconds() + '秒';

1. setTomeout(fn, 周期：豪秒): 周期只会执行一次
2. setInterval(fn, 周期：豪秒)： 间隔周期一直执行

源码：

源码（es拼接字符串）：

表单

关键代码：e.checked=true;

全选和反选的实现

    
        
        
        
    
    

        读书


        电影


        游戏


        游泳


        写代码


        全选 
        反选