Python 前端之JS

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的更多相关文章

Python 前端 js基础
Javascript 概述 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的 ...
Python爬虫—破解JS加密的Cookie
前言在GitHub上维护了一个代理池的项目,代理来源是抓取一些免费的代理发布网站.上午有个小哥告诉我说有个代理抓取接口不能用了,返回状态521.抱着帮人解决问题的心态去跑了一遍代码.发现果真是这样. ...
前端05 /js基础
前端05 /js基础昨日内容回顾 css选择器的优先级行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0) 颜色 rgb(255,255,2 ...
如何用python抓取js生成的数据 - SegmentFault
如何用python抓取js生成的数据 - SegmentFault 如何用python抓取js生成的数据 1赞踩收藏想写一个爬虫,但是需要抓去的的数据是js生成的,在源代码里看不到,要怎么才能抓 ...
分享非常好用的前端分页js工具类灵活简单易懂
分享自己封装的前端分页js工具类下面是默认样式效果截图可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...
Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

随机推荐

Toad快速入门
Toad快速入门在实际中,Toad的用户很少用到其强大的新特性,同时新用户的摸索式熟悉Toad往往花费更多的时间.为此,铸锐数码为每个新购买Toad客户,提供两人次的在线培训服务,帮助客 ...
String和StringBuffer
已知在Java中,boolean.byte.short.int.long.char.float.double这八种是基本数据类型,其余的都是引用类型,比如String.数组.接口.对象等. 当我们声明 ...
mm/memory
/* * linux/mm/memory.c * * Copyright (C) 1991, 1992 Linus Torvalds */ /* * demand-loading started ...
数据获取以及处理系统 --- 功能规格说明书V2.0
产品规格说明书: 版本号: V2.0 版本说明: Version 1.0 简单得需求分析以及构思,初稿形成 Version 2.0 细化beta阶段设计,增加典型用户尝尽以及功能罗列 1. 引言 1. ...
[NOIP2011] 计算系数（二项式定理）
题目描述给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别为 a ,b ,k , ...
poj3114 强连通+最短路
题意:有 n 个城市,城市之间能够通过邮件或者电子邮件传递消息,已知 m 条邮件线路,每条线路代表 A 能送邮件到 B,并且花费 V 时间,如果几个城市之间能够相互邮件送达,那么他们就在同一个国家内, ...
论文笔记之： Hierarchical Convolutional Features for Visual Tracking
Hierarchical Convolutional Features for Visual Tracking ICCV 2015 摘要:跟卢湖川的那个文章一样,本文也是利用深度学习各个 layer ...
[转]Could not load file or assembly 'System.Core, Version=2.0.5.0 和autofac冲突的问题
Could not load file or assembly 'System.Core, Version=2.0.5.0 和autofac冲突的问题来源:http://www.cnblogs.co ...
HttpSession的线程安全问题及注意事项
摘自http://blog.csdn.net/java2000_net/article/details/2922357 HttpSession session = request.getSessio ...
OAF_JDBC系列1 - 数据库交互取值方式（案例）
2014-06-15 Created By BaoXinjian

Python 前端之JS

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

随机推荐

热门专题