第85节：Java中的JavaScript

标题图

第85节：Java中的JavaScript

复习一下css：

选择器的格式：

元素选择器：元素的名称{}
类选择器：. 开头
ID选择器：# ID选择器

后代选择器： 选择器1 选择器2
子元素选择器：选择器1 > 选择器2
选择器分组： 选择器1，选择器2，选择器3{}
属性选择器：选择器[属性名称='属性值']

盒子模型：

内边距：盒子内的距离
边框：盒子的边框
外边距： 盒子和盒子之间的距离

轮播图

自动播放：每隔3秒切换，切换图片，

// 点击弹框
// 确定事件，点击事件
// 通过事件定义函数
// 在函数里定义操作页面元素，做一些交互的操作



 
 

  这里是达叔小生
 

// 点击切换图片


    
        
        
        
    
    
        
        

        
    

setTimeout(): 在指定的毫秒数后调用函数
setInterval(): 按照指定的周期来调用函数
scrollTo(): 把内容滚动到指定的坐标
scrollBy(): 按照指定的像素值来滚动内容
resizeTo(): 把窗口的大小调整到指定的宽度和高度
resizesBy(): 按照指定的像素调整窗口的大小
prompt(): 显示可提示用户输入的对话框
open(): 打开一个新的浏览器窗口
moveTo(): 把窗口的左上角移动到一个指定的坐标
moveBy(): 可相对窗口的当前坐标把它移动指定的像素
focus(): 把键盘焦点给予一个窗口

setInterval()方法按照指定的周期来调用函数，方法会不停地调用函数，直到clearInterval()被调用或者窗口被关闭，

stop

定时器

// 技术分析
function test(){
 console.log("调用了");
}
// setInterval("test()", 2000); 
这个函数会循环，定时2秒后，这个函数会重新被调用，一直循环。
// setTimeout("test()", 2000);
这个函数被用了，就不再执行了

取消操作，alert()显示一段消息，blur()把键盘焦点从顶层窗口移开，clearInterval()取消由setInterval()设置的timeout，clearTimeout()取消由setTimeout()方法设置的timeout。

setIntervale()

参数：
mode 参数为要调用的函数，或是执行代码串
millisec 参数为调用code之间的时间间隔

图片自动轮播：

// 会被显示在状态栏

文件加载完成事件onload，事件触发

显示和隐藏

setInterval：每隔多少毫秒执行一次
setTimeout：多少毫秒后执行一次
clearInterval和clearTimeout
img.style.display=block和img.style.display=none

定时广告：

表单效果

onblur 元素失去焦点
onchange 域的内容被改变
onfocus 元素获取焦点

    
        
        
        
        
        
    
    
        

            用户名:

            密码:

            确认密码:

            邮箱:

            手机号:

            
            
        
    

表单提交规则

https://github.com/huangguangda/Tools/blob/master/regutils.js

    
        
        
        
    
    
        

            用户名: 

            
        
            
    

引入文件

选择城市

代码

    
        
        
        
    
    
        
        
            --请选择--
            广东省
            湖南省
            福建省
        
        
        
    

案例:

    
        
        
        
    
    
        
        

            

                
分类名称
                

            
            

                
分类描述
                

            
            

                
分类商品
                

                    
                    

                        已有商品

                        
                            
                            
                            
                            
                        
                        

                         >>  

                         >>> 
                    
                    
                    
 
                        未有商品

                        
                            
                            
                            
                            
                        
                        

                         <<  

                         <<< 
                    
                
            
            

                

                    
                
            
        
        
        
    

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
博客： 达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

• 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
• 小礼物走一走 or 点赞`