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()"/>
<input type="button" value="取消" onclick="CancelALL()"/>
<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 ...
随机推荐
- 不能将 Null 值赋给类型为 (不可为 null 的值类型)的成员。解决方法
一般代码没有错,是对应的数据库里有的字段是NULL,不是主键,主键肯定不会是NULL的.是其他字段. 把这些列的NULL赋值.
- 地址(Address)——WCF学习笔记(2)
地址(Address)分为: 统一资源表示(URI). EndpointAddress. 端口共享. 逻辑地址与物理地址. 请求监听与消息分发.
- 在HTML标签<a/>中调用javascript代码
<a/>标签的“href”属性可以是一个有效的URL,表示跳转的目的地,除此之外,href还可以是一段javascript代码.当为“href”设置javascript代码时,格式如下:& ...
- chrome 49 版本 跨越 --args --disable-web-security --user-data-dir
转载: 做前端的,用Ajax获取数据,是常有的事情,同域下自然没问题了,如果是不同域获取数据,浏览器就有个同源策略的限制. 如图: Origin * is not allowed by Access- ...
- 【NOIP2005】过河
感觉这题好玄--最后看了chty的代码才过,我现在这样必须看题解才能A题怎么办嘛qaq 原题: 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上 ...
- Ubuntu Gnome16.04下安装cuda、theano和opencv
1. 安装显卡驱动 ~$ lspci | grep controller00:02.0 VGA compatible controller: Intel Corporation Sky Lake In ...
- 请求rest web服务client
RestClient using System; using System.Globalization; using System.IO; using System.Net; using System ...
- 如何在目录中查找具有指定字符串的文件（shell）
find /tmp/ -name test.txt | xargs grep "hello" 可以查找到tmp目录下文件名test.txt并包含字符串hello的文件.
- 【python】传入函数
def add(x, y, f): return f(x) + f(y) 当我们调用add(-5, 6, abs)时,参数x,y和f分别接收-5,6和abs,根据函数定义,我们可以推导计算过程为: x ...
- <<敏捷开发>>读书笔记
1.走进敏捷 * 组织成功 增加业务专家,较少bug和测试的交流成本,即使取消不好的技术 首先发布最有价值的特性,时常发布新的版本,即使改进软件 * 技术成功 结对编程,代码审核,确保同一份代码有不同 ...