day75 js 正则表达式 window对象轮播图片调用定时器

发布于:2024-04-09 ⋅ 阅读:(158) ⋅ 点赞:(0)

     

一  正则表达式:


    RegExp 对象:    对字符串执行模式匹配的强大工具。
    1 创建正则表达式对象
         let reg = /模式/修饰符
            修饰符 attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m",
                i 执行对大小写不敏感的匹配。 
                g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 
                m 执行多行匹配。 
    2 方法:
            test(字符串) :如果能匹配则返回true,否则返回false
    3 模式字符:
        1) 范围 []
            [abc] 查找方括号之间的任何字符。 
            [^abc] 查找任何不在方括号之间的字符。 
            [0-9] 查找任何从 0 至 9 的数字。 
            [a-z] 查找任何从小写 a 到小写 z 的字符。 
            [A-Z] 查找任何从大写 A 到大写 Z 的字符。 
            (red|blue|green) 查找任何指定的选项。 
        2) 开始或结束的字符
            /^  :/^n 匹配任何开头为 n 的字符串。 

            $/  :n$/ 匹配任何结尾为 n 的字符串。 
        3)表示长度的字符
            *  :0个或多个  {0,}
            ?  : 0个或1个 {0,1}
            +  :1个或多个  {1,}
            {n} : n个
            {n,}: n个或多个
            {n,m}: n-m个


        4) 元字符:


            . 查找单个字符,除了换行和行结束符。 
            \w 查找单词字符。 
            \W 查找非单词字符。 
            \d 查找数字。 
            \D 查找非数字字符。 

            \s 查找空白字符。 
            \S 查找非空白字符。 

二 : 获取标签对象,属性,值


    一) 获取标签对象的方法
        1 通过ID获取单个对象
            document.getElementById("id名");
        2 通过标签名获取一组标签对象
            getElementsByTagName("标签名")
        3) 通过类样式名获取一组标签对象
            getElementsByClassName("类样式名")
        4) 通过样式的name名获取
            getElementsByName("name名")

    二 ) 获取和设置标签的属性值
         获取属性值:  let 变量名= 标签对象.属性名
         赋值:         标签对象.属性名 = 值
        注意  :checked,selected,readonly,disabled返回的值为true或false
    三) 获取和设置表单元素的value值
            取值:  let 变量名= 表单元素对象.value
            赋值:    表单元素对象.value = 值
            注意: 获取到的表单元素值,为string类型,如果无值,则为""
    四) 修改标签的样式
        1) 使用style属性
                标签对象.style.样式属性名=值;
        2)类样式
                标签对象.className="类样式名"
    五) 获取和设置标签内容(开始标签与结束标签之间的内容)
         标签对象.innerHTML  :设置或返回元素的内容。
         标签对象.innerText  :设置或返回节点及其后代的文本内容。
         区别:
            innerHTML、innerText 与 textContent 的区别
            innerText 属性返回:            
                只返回元素及其所有子元素的文本内容,
                没有 CSS 隐藏文本间距和标签,除了 <script> 和 <style> 元素。
            innerHTML 属性返回:
                元素的文本内容,包括所有空白和内部 HTML 标签。
            textContent 属性返回:
                元素和所有后代的文本内容,带有空白和 CSS 隐藏文本,但没有标签。
    
        

function checkName(){
	let userName = document.getElementById("userName").value;
	let tips = document.getElementById("tips");
	
	if(userName == ""){
		tips.innerHTML = "用户名为空"
		tips.style.color = "red"
		return false;
	}
	
	
	let reg  = /^\d/
	if(reg.test(userName)){
		tips.innerHTML = "开头不能是数字"
		tips.style.color = "red"
		return false;
	}
	
	
	reg = /[\d \w _]{8,15}/
	if(!reg.test(userName)){
		tips.innerHTML = "包含8-15位字母数字下划线 "
		tips.style.color = "red"
		return false;
	}
	
	tips.innerHTML ="✔"
	tips.style.color = "green"
	return false;
	
}


function checkPassWord(){
	let password = document.getElementById("password").value;
	let tips = document.getElementById("passwordInput");
	
	if(password == ""){
		tips.innerHTML = "用户名为空"
		tips.style.color = "red"
		return false;
	}
	
	
	
	reg = /[\d \w _]{8,15}/
	if(!reg.test(password)){
		tips.innerHTML = "包含8-15位字母数字下划线 "
		tips.style.color = "red"
		return false;
	}
	
	tips.innerHTML ="✔"
	tips.style.color = "green"
	return false;
}

function checkRepeatPassWord(){}

function checkCell(){
	let cell = document.getElementById("cell").value;
	let tips = document.getElementById("tips");
	
	if(cell == ""){
		tips.innerHTML = "用户名为空"
		tips.style.color = "red"
		return false;
	}
	
	let reg = /^1[3578][0-9]{97}/
	
	if(!reg.test(cell)){
		tips.innerHTML = ""
		tips.style.color = "red"
		return false;
	}
	
}


 三 window对象的属性和方法


    1 信息框
        alert("内容")


        confirm()确认框 : 点击确定返回true,否则返回false


        prompt() 方法显示对话框: 点击确定返回输入的信息,无窗口
                                                  点击取消,返回null

        window.onload窗体网页一开始加载时调用的函数方法


    2 定时器
        setInterval("代码块",时间间隔) :周期性执行指定的代码。
        clearInterval()     清除使用 setInterval() 设置的计时器。

	let index = -1;
function scrollingDisplay(){
	if(arguments.length !== 0){
		index = arguments[0]
	}else{
			
				if(index == 5){
					index =-1;
		}
		index ++;
	}
	
	let imgs =  document.getElementById("scroll_img").getElementsByTagName("li");
	let nums =  document.getElementById("scroll_number").getElementsByTagName("li");
	
	for (i = 0; i < imgs.length; i++) {
				if(i == index){
					imgs[i].style.display = "block"
					nums[i].className= "scroll_number_over"
				}else{
					imgs[i].style.display = "none"
					nums[i].className= "";
				}
			}
		
}
	let m =	window.setInterval("scrollingDisplay()",1000)
	
	function numOver(i){
		window.clearInterval(m);
		scrollingDisplay(i);
	}
	
	function numOut(){
		m = window.setInterval("scrollingDisplay()",1000)
	}