JavaScript由浏览器编译运行

JS的导入方式有两种，一种直接定义，第二种通过src引入；可以存放在<head>头部，但是强烈建议放在<body>的最下面，因为如果你引入外部的JS样式很久都不能出来，会影响到用户体验。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script>

        alert('')

    </script>

</head>

<body>

    <script>

        alert('')

    </script>

    <script src="commons.js"></script>

</body>

</html>

JS的变量定义，有var表示局部变量，只能在函数体内被识别，没有var表示全局变量，哪里都可以使用。

<body>

    <script>

        function f1(){

            i = 123

        }

        f1();

        alert(i);

    </script>

</body>

利用JS实现的跑马灯效果：

<body>

    <div id = "i1" style="display: inline-block;background-color: green;color: white">欢迎宝强莅临指导</div>

    <script>

        setInterval("f1()",1000);

        function f1(){

            var tag = document.getElementById('i1');

            var text = tag.innerText;

//            alert(text);

            var a = text.charAt(0);

            var sub = text.substring(1,text.length);

            var new_str = sub + a;

            tag.innerText = new_str;

        }

    </script>

</body>

JS的序列化

dic = {'k1':'123','k2':456}

Object {k1: "123", k2: 456}

dic_str = JSON.stringify(dic)　　//将字典转换为字符串

"{"k1":"123","k2":456}"

dic_str

"{"k1":"123","k2":456}"

dic_new = JSON.parse(dic_str)   //将字符串转为字典

Object {k1: "123", k2: 456}

dic_new

Object {k1: "123", k2: 456}

JS之encode和decode，针对于URL使用

    <script>

        var site = "http://www.baidu.com?王宝强";

        var site_url = encodeURI(site);

        console.log(site_url);

        var site_de = decodeURI(site_url);

        console.log(site_de);

    </script>
执行结果：
http://www.baidu.com?%E7%8E%8B%E5%AE%9D%E5%BC%BAs3.html:13 
http://www.baidu.com?王宝强

JS之escape和unescape针对字符串进行转义，譬如在cookies的使用中

JS之函数的分类

    <script>　　　　　　　　　　　　　　　　　　　　　　　　//普通函数

        setInterval('f1()',2000)

        function f1(){

            alert('123')

        }

    </script>

    <script>　　　　　　　　　　　　　　　　　　　　　　　　//匿名函数，调用的过程中不使用函数名

        setInterval(function(){

            alert('123');

        },2000)

    </script>

    <script>　　　　　　　　　　　　　　　　　　　　　　　　//自执行函数，分为两部分，前面是函数，后面是传递的参数()()。

        (function(args){

            alert(args);

        })(123)

    </script>

JS的作用域

<body>

    <script>

        xo = "alex";

        function func(){

            var xo = "eric";

            function inner(){

                console.log(xo);

            }

            xo = "severn";

            return inner;

        }

        var ret = func();

        ret();

    </script>

</body>
执行结果：
severn

搜索框的实现：

<body>

    <div>

        <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();" />

        <!--<input id="i2 " type="text" onblur="blur();">-->

    </div>

    <script type="text/javascript">

        function Focus(){

            var tag = document.getElementById('i1');

            if (tag.value == "请输入关键字"){

                tag.value = "";

            }

        }

        function Blur(){

            var tag = document.getElementById('i1');

            if (tag.value.trim().length == 0){

                tag.value = "请输入关键字";

            }

        }

    </script>

</body>

模态对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            margin: 0;

        }

        .hide{

            display: none;!important;

        }

        .shade{

            position: fixed;

            top:0;

            bottom: 0;

            left: 0;

            right: 0;

            background-color: aquamarine;

            opacity: 0.6;

            z-index: 1000;

        }

        .modal{

            height: 200px;

            width: 400px;

            background-color: darkorange;

            position: fixed;

            top: 50%;

            left: 50%;

            margin-left: -200px;

            margin-top: -100px;

            z-index: 1001

        }

    </style>

</head>

<body>

    <div style="height: 2000px;background-color: #F1F1F1;">

        <input type="button" value="点我" onclick="Click()"/>

    </div>

    <div id="shade" class="shade hide"></div>

    <div id="modal" class="modal hide">

        <input type="button" value="取消" onclick="DeClick()"/>

    </div>

    <script>

        function Click(){

            var t1 = document.getElementById("shade");

            var t2 = document.getElementById("modal");

            t1.classList.remove("hide");

            t2.classList.remove("hide");

        }

        function DeClick(){

            var t1 = document.getElementById("shade");

            var t2 = document.getElementById("modal");

            t1.classList.add("hide");

            t2.classList.add("hide");

        }

    </script>

</body>

</html>

用JS实现checkbox选择框的选择

<body>

    <table border="1 solid red" id="tb">

        <input type="button" value="全选" onclick="CheckALL()"/>&nbsp;

        <input type="button" value="取消" onclick="CancelALL()"/>&nbsp;

        <input type="button" value="反选" onclick="ReverseALL()"/>

        <tr>

            <th>标题1</th>

            <th>标题2</th>

            <th>标题3</th>

        </tr>

        <tr>

            <td><input type="checkbox"/></td>

            <td>内容2</td>

            <td>内容3</td>

        </tr>

        <tr>

            <td><input type="checkbox"/></td>

            <td>内容2</td>

            <td>内容3</td>

        </tr>

        <tr>

            <td><input type="checkbox"/></td>

            <td>内容2</td>

            <td>内容3</td>

        </tr>

    </table>

    <script>

        function CheckALL(){

            var tb = document.getElementById("tb");

            var tbchild = tb.children;

            var trs = tbchild[0].children;

            for (var i=1;i<trs.length;i++){

                var current_tr = trs[i];

                var ck = current_tr.firstElementChild.firstElementChild;

                ck.checked = true;

//                ck.setAttribute("checked","checked");

            }

        }

        function CancelALL(){

            var tb = document.getElementById("tb");

            var tbchild = tb.children;

            var trs = tbchild[0].children;

            for (var i=1;i<trs.length;i++){

                var current_tr = trs[i];

                var ck = current_tr.firstElementChild.firstElementChild;

                if(ck.checked) {

                    ck.checked = false;

//                    ck.removeAttribute("checked");

                }

            }

        }

        function ReverseALL(){

            var tb = document.getElementById("tb");

            var tbchild = tb.children;

            var trs = tbchild[0].children;

            for (var i=1;i<trs.length;i++){

                var current_tr = trs[i];

                var ck = current_tr.firstElementChild.firstElementChild;

                if (ck.checked){

                    ck.checked = false;

                }else{

                    ck.checked = true;

                }

            }

        }

    </script>

</body>

JS实现的点赞功能：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .item{

            padding:50px;

            position: relative;

        }

        .item span{

            position: absolute;

            top: 50px;

            left:74px;

            opacity: 1;

            font-size: 24px;

        }

    </style>

</head>

<body>

    <div class="item">

        <a onclick="Favor(this)">赞1</a>

    </div>

    <div class="item">

        <a onclick="Favor(this)">赞2</a>

    </div>

    <div class="item">

        <a onclick="Favor(this)">赞3</a>

    </div>

    <div class="item">

        <a onclick="Favor(this)">赞4</a>

    </div>

    <script>

        function Favor(ths){

            console.log(ths);

            console.log(ths.parentElement);

            var top = 50;

            var left = 74;

            var op = 1;

            var fontSize = 24;

            var tag = document.createElement("span");

            tag.innerText = '+1';

            tag.style.position = 'absolute';

            tag.style.top = top +'px';

            tag.style.left = left +'px';

            tag.style.opacity = op;

            tag.style.fontSize = fontSize +'px';

            ths.parentElement.appendChild(tag);

//            function ftime(){

//                top -= 10;

//                left += 10;

//                op -= 0.1;

//                fontSize += 10;

//

//                tag.style.top = top +'px';

//                tag.style.left = left +'px';

//                tag.style.opacity = op;

//                tag.style.fontSize = fontSize +'px';

//

//                if (op <= 0){

//                    console.log("KKKK")

////                    clearInterval(interval);

////                    ths.parentElement.removeChild(tag);

//                }

//            }

//            setInterval('ftime()',50);

            var interval = setInterval(function(){

                top -= 10;

                left += 10;

                op -= 0.1;

                fontSize += 10;

                tag.style.top = top +'px';

                tag.style.left = left +'px';

                tag.style.opacity = op;

                tag.style.fontSize = fontSize +'px';

                if (op <= 0){

                    clearInterval(interval);

                    ths.parentElement.removeChild(tag);

                }

            },50)

        }

    </script>

</body>

</html>

JS定时器一次执行：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id = "status" style="color:red"></div>

    <input type = "submit" onclick="DeleteStatus()" value="删除"/>

    <script>

        function DeleteStatus(){

            var s = document.getElementById("status");

            s.innerText ="删除成功";

            setTimeout(function(){

                s.innerText = "";

            },5000)

        }

    </script>

</body>

</html>

JS之返回顶部

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .back{

            position: fixed;

            right: 20px;

            bottom: 20px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body onscroll="BodyScroll()">

    <div style="height: 2000px;background-color: aquamarine" ></div>

    <div id="back" class="back hide" onclick="BackTop()" style="cursor: pointer;color: crimson">返回顶部</div>

    <script>

        function BackTop(){

            document.body.scrollTop = 0;

        }

        function BodyScroll(){

            var s = document.body.scrollTop;

            var t = document.getElementById("back");

            if (s >= 100){

                t.classList.remove("hide");

            }else{

                t.classList.add("hide");

            }

        }

    </script>

</body>

</html>

Python 前端之JS的更多相关文章

  1. Python 前端 js基础

    Javascript 概述 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的 ...

  2. Python爬虫—破解JS加密的Cookie

    前言 在GitHub上维护了一个代理池的项目,代理来源是抓取一些免费的代理发布网站.上午有个小哥告诉我说有个代理抓取接口不能用了,返回状态521.抱着帮人解决问题的心态去跑了一遍代码.发现果真是这样. ...

  3. 前端05 /js基础

    前端05 /js基础 昨日内容回顾 css选择器的优先级 行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0) 颜色 rgb(255,255,2 ...

  4. 如何用python抓取js生成的数据 - SegmentFault

    如何用python抓取js生成的数据 - SegmentFault 如何用python抓取js生成的数据 1赞 踩 收藏 想写一个爬虫,但是需要抓去的的数据是js生成的,在源代码里看不到,要怎么才能抓 ...

  5. 分享非常好用的前端分页js工具类 灵活 简单易懂

    分享自己封装的前端分页js工具类  下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...

  6. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  7. Web前端-Vue.js必备框架（四）

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  8. Web前端-Vue.js必备框架（三）

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  9. Web前端-Vue.js必备框架（二）

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

随机推荐

  1. 从零开始学习Node.js例子一 http get和post

    httpserverrequestget.js /* 获取GET请求内容 由于GET请求直接被嵌入在路径中,URL是完整的请求路径,包括了?后面的部分,因此你可以手动解析后面的内容作为GET请求的参数 ...

  2. html table动态合并单元格 js方法

    <script> $(document).ready(function(){ function mc(tableId, startRow, endRow, col) { var tb = ...

  3. 关于 xcode5 真机调试 的 no matching provisioning profiles found

    产生原因:在xcode5里面不一定是因为你的真机证书有问题,有可能是因为,项目本来在别的组里有会出现此bug 如果你出现上图的错误,只需要在此项目的***.xcodeproj 文件,然后右键选择“显示 ...

  4. mudOS源码 options.h配置详细选项

    /* options.h配置详细选项—————————————————————————-将 MudOS 下载解压以后可以在相应目录的根目录中找到 options.h 这个文件.如果修 改了这个文件,那 ...

  5. Spring4 + Quartz-2.2.0集成实例

    Spring3.0不支持Quartz2.0,因为org.quartz.CronTrigger在2.0从class变成了一个interface造成IncompatibleClassChangeError ...

  6. java端口扫描（原创）

    项目需要扫描占用的端口来判断服务是否启动,通过查资料发现大多数方法都是ServerSocket socket = new ServerSocket(port);代码如下: package com.fr ...

  7. [BZOJ 3503][Cqoi 2014]和谐矩阵

    我觉得这一题的样例输出一点都不和谐,大家千万别像我一样被坑了…… 题目不算难,果然是进错省系列555,不过搞出 O(n*m*2m) 的还是不要挣扎的比较好 我们暴力地推出第 n 行 第 m 列中每个数 ...

  8. 基于MVC4+EasyUI的Web开发框架形成之旅--权限控制

    我在上一篇随笔<基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍>中大概介绍了基于MVC的Web开发框架的权限控制总体思路.其中的权限控制就是分为“用户登录身份验证” ...

  9. linux常用命令 (mac )，积少成多

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  10. PHP入门part2

    PHP的数据类型 php数据类型分为三大类, 标量类型:整型.浮点型.布尔型和字符串型 复合类型:数组型和对象(object) 特殊类型:空类型和资源型 !资源型以后会讲 整形(int)就是整数的数值 ...