2018-11-05js的window对象

随机数产生方式
parseInt(Math.random()*100 + 1)//parseInt取整 Math.random()取0-1(不包括1)的随机数

window对象

//window可以不写,默认为window对象。
alert() / prompt() / confirm() / close()
警告框 / 输入框 / 确认框 / 关闭
window.setInterval(delayGo,5000);//setInterval周期执行,时间单位毫秒。
window.setTimeout(delayGo,1000); //只调用一次,但是一般用于函数递归,setTimeout更加灵活。
clearInterval()  /  clearTimeout() //清除计时器

window.document - 文档对象
window.location - 浏览器地址栏
//location.hostname 返回 web 主机的域名
//location.pathname 返回当前页面的路径和文件名
//location.port 返回 web 主机的端口 (80 或 443)
//location.protocol 返回所使用的 web 协议(http:// 或 https://)
window.history - 历史记录
//history.back() - 与在浏览器点击后退按钮相同
//history.forward() - 与在浏览器中点击向前按钮相同
//history.go(n) - 前进或者后退n步
window.navigator - 浏览器
//navigator.appCodeName - 浏览器代号
//navigator.appName - 浏览器名称
// navigator.appVersion - 浏览器版本
window.screen - 屏幕
//screen.availWidth - 可用的屏幕宽度
//screen.availHeight - 可用的屏幕高度
//screen.colorDepth - 色深
//screen.pixelDepth - 分辨率

拿到html元素(document对象)

document.querySelector("#welcome")//通过选择器拿元素
document.querySelectorAll() //选择器拿到多个元素,返回列表
document.getElementById()//根据id拿元素
document.getElementsByClassName()//根据类名拿元素,返回为列表
document.getElementsByTagName()//根据标签名拿元素,返回为列表

写入到html元素

//div -- 特定标签对应的变量
div.innerHTML //能解释 html 代码
div.textContent //里面只能放文本,代码原样输入

其他知识

Math.random()随机产生0~1的随机数(前闭后开)
parseInt()取整
parseFloat()取小数

使用匿名函数并且调用它的方法


13692175-f0428746b42705ef.png

一、网页上显示当前时间

        <div id="time"></div>

        <script type="text/javascript">
            var days = ["日","一","二","三","四","五","六"];
            function showTime(){
                var now = new Date();
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var date = now.getDate();
                var hour = now.getHours();
                var minute = now.getMinutes();
                var second = now.getSeconds();
                var day = now.getDay();
                var div = document.getElementById("time");  //得到id为指定的div标签
                div.innerHTML = year + "年" + 
                    (month < 10 ? "0":"") + month + "月" + 
                    (date < 10 ? "0":"")+ date + "日&nbsp;" +
                    (hour < 10 ? "0":"")+ hour + ":" +
                    (second < 10 ? "0":"")+ second + "&nbsp;星期" + days[day];
                //div.innerHTML 标签里面的html代码
                //div.textContent 里面只能放文本,代码原样输入
            }
            showTime()  //网页开始没有显示时间,先执行一遍。
            window.setInterval(showTime,1000) //设置时间周期,每1000毫秒执行一次
        </script>

二、网页跑马灯

        <h1 id="welcome">欢迎来到千峰教育成都校区Python就业班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
        <script type="text/javascript">
            var str1 = document.getElementById("welcome")
//          document.querySelector("#welcome")//通过选择器拿元素
//          document.querySelectorAll() //选择器拿到多个元素,返回列表
//          document.getElementById()//根据id拿元素
//          document.getElementsByClassName()//根据类名拿元素,返回为列表
//          document.getElementsByTagName()//根据标签名拿元素,返回为列表
            function showStr(){
                var str = str1.textContent;
                str = str.substring(1) + str.charAt(0);//substring-取字串  charAt-取字符
                str1.innerHTML = str;
            }
            showStr();
            window.setInterval(showStr,800);
        </script>

三、网页延时跳转

        <h2><span id="counter" >5</span>秒以后自动跳转到百度……</h2>
        <script type="text/javascript">
            var countdown = 5;
            var span = document.getElementById("counter");
            function delayGo(){
                countdown -= 1;
                if (countdown == 0){
                    location.href = "http://www.baidu.com";
                }else{
                    span.textContent = countdown;
                    setTimeout(delayGo,1000); //只调用一次,所以重新调用(setTimeout更加灵活)
                }

            }
            window.setTimeout(delayGo,1000); //setTimeout只执行一次
//          window.setInterval(delayGo,5000);//setInterval周期执行
        </script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352

推荐阅读更多精彩内容