review
five _star _ flag(canvas)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动的国旗</title>
<script type="text/javascript">
var x = 60;
var y = 300;
var vy = 1;
var width = 150;
var height = 100;
var maxR = 0.15,
minR = 0.05; //
var maxX = 0.25,
maxY = 0.25; //大五星的位置
var minX = [0.50, 0.60, 0.60, 0.50];
var minY = [0.10, 0.20, 0.35, 0.45];
var ssy = 0; //星星速度
function draw() {
var cxt = document.getElementById("canvas").getContext('2d');
cxt.clearRect(0, 0, 1000, 1000);
//旗杆
cxt.beginPath();
cxt.lineWidth = 20;
cxt.lineCap = "round";
cxt.moveTo(50, 50); //设置起点
cxt.lineTo(50, 250); //绘制一条从当前位置到指定x以及y位置的直线
cxt.stroke();
cxt.beginPath();
cxt.lineCap = "butt";
cxt.moveTo(50, 249);
cxt.lineTo(50, 500)
cxt.stroke();
//国旗
cxt.beginPath();
cxt.fillStyle = "red";
cxt.fillRect(x, y, width, height);
// 画大 ☆
var ox = height * maxX,
oy = height * maxY;
ox += x;
oy += 300;
oy += ssy;
create5star(cxt, ox, oy, height * maxR, "#ff0", 0); //绘制五角星
// 画小 ★
for(var idx = 0; idx < 4; idx++) {
var sx = minX[idx] * height,
sy = minY[idx] * height;
var theta = Math.atan((oy - sy) / (ox - sx));
sx += x;
sy += 300;
sy += ssy;
create5star(cxt, sx, sy, height * minR, "#ff0", -Math.PI / 2 + theta);
}
y -= vy;
ssy--;
if(y <= 50)
window.cancelAnimationFrame(draw);
else
window.requestAnimationFrame(draw);
}
//绘制五角星
/**
* 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上
* rotate:绕对称轴旋转rotate弧度
*/
function create5star(context, sx, sy, radius, color, rotato) {
context.save();
context.fillStyle = color;
context.translate(sx, sy); //移动坐标原点
context.rotate(Math.PI + rotato); //旋转
context.beginPath(); //创建路径
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for(var i = 0; i < 5; i++) { //画五角星的五条边
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(x * radius, y * radius);
}
context.closePath();
context.fill();
context.restore();
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="1000px" height="1000px"></canvas>
</body>
</html>
worker bignumber
this.importScripts("bignumber.js");
this.onmessage = function(ev) {
var tm1 = new Date();
var num = new BigNumber(ev.data.num);
var ret = simple_prime(num);
if(ret == false) {
postMessage("不是质数");
} else if(ret == 1) {
postMessage("maybe");
var tm2 = new Date();
var time = (tm2 - tm1) / 1000;
console.log("计算用时：" + time + "秒！");
}
}
function simple_prime(num1) {
var num = new BigNumber(num1);
if(num == 2 || num == 3)
return 1;
if(num < 2 || num.modulo(2) == 0) {
return false;
}
if(num.modulo(6) != 1 && num.modulo(6) != 5)
return false;
for(var i = new BigNumber(5); i.multipliedBy(i) <= num.squareRoot(); i = i.plus(6)) {
console.log(i.toFixed());
if(num.modulo(i) == 0 || num.modulo(i.plus(2)) == 0)
return false;
}
return 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大数测试&web多线程</title>
<script src="js/bignumber.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery_1.10.2_dev.js"></script>
<style type="text/css">
input {
width: 360px;
}
</style>
</head>
<body>
<p>输入一个大整数：<input type="txt" name="num" id="num" value="" /> <button type="button"> 判断 </button>
<br>判断结果：<output id="out"></output>
</p>
<script type="text/javascript">
$(document).ready(function() {
var tim;
var w1 = new Worker("js/rqd_prime.js");
var w2 = new Worker("js/rqd_prime.js");
// var w3=new Worker("rqd_prime.js");
// var w4=new Worker("rqd_prime.js");
w1.onmessage=do_msg;
w2.onmessage=do_msg;
var cnt=0;
function do_msg(ev){
if(ev.data=="不是质数")
$("#out").text("不是质数");
else if(ev.data=='maybe'){
if(++cnt ==2){
$("#out").text("两个子线程都找不到整除因子，是质数");
}
}
}
$(":button").click(function() {
var str=$("#num").val();
var num=new BigNumber(str);
var hm=num.sqrt().integerValue();
var hmz=hm.dividedToIntegerBy(2);
w1.postMessage({num:str});
w2.postMessage({num:str});
$("#out").text("计算中。。。");
cnt=0;
});
});
</script>
</body>
</html>
dragerble
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery运用拖动事件</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
body {
text-align: top;
}
ul {
width: 400px;
height: 380px;
float: left;
/*display: inline-block;
position: relative; */
border: 1px solid black;
}
li {
line-height: 1.8em;
font-size: 18px;
}
div {
border: 1px solid red;
display: inline-block;
/* position: relative; */
width: 400px;
height: 400px;
margin-left: 40px;
/* right: -600px;
top: -400px; */
}
#common {
border: none;
width: inherit;
}
button {
/*clear: both;
position: relative;
left: -250px;
top:30px */
}
</style>
</head>
<body>
<h2>党的政策对老百姓好才是真的好</h2>
<br>
<ul>
<li price="20" draggable="true">第1本书是 JAVA程序设计语言</li>
<li price="22" draggable="true">第2本书是 C语言编程指南</li>
<li price="27" draggable="true">第3本书是 计算机组成原理</li>
<li price="22.5" draggable="true">第4本书是 操作系统原理</li>
<li price="32.5" draggable="true">第5本书是 SOA开发技术</li>
<li price="34.75" draggable="true">第6本书是 移动WEB前端高效开发实战</li>
<li price="28.95" draggable="true">第7本书是 VUE快速入门</li>
<li price="33.55" draggable="true">第8本书是 系统架构师设计教程</li>
<li price="59" draggable="true">第9本书是 TD-LTE技术原理与系统设计</li>
<li price="38.5" draggable="true">第10本书是 高效能人士的7个习惯</li>
</ul>
<div id="cc">
</div>
<span id="txt">ccccccccccccc</span><br>
<button type="button"> 解除锁定 </button>
<script type="text/javascript">
$(document).ready(function() {
var the_drag_ele;
// li元素设置拖动事件处理
$("li").bind({
dragstart: function(ev) {
the_drag_ele = this;
$(this).css("background-color", "yellow").css("opacity", "0.5");
},
dragend: function(ev) {
//.parent()返回父元素
console.log($(this).parent()[0]); //返回第一个父元素的所有元素
// console.log("------------");
console.log($("#cc"));
console.log($("#cc")[0]);
if ($(this).parent()[0] === $("#cc")[0]) { // 如果在div容器内结束拖动
$(this).css("background-color", "#999").css("opacity", "1").attr("draggable", "false");
}
if ($(this).parent()[0] === $("ul")[0]) { // 如果在ul容器内结束拖动
$(this).css({
'background-color': "",
opacity: "1"
});
}
}
});
// 设置容器元素允许拖放进入和放下
$("ul,div").bind({
dragover: function(ev) {
ev.preventDefault();
$(this).css("background-color", "purple");
},
drop: function(ev) {
ev.preventDefault();
$(this).append(the_drag_ele);
$(this).css("background-color", "");
updateSpantext();
},
dragleave: function(ev) {
$(this).css("background-color", "");
}
});
/**************** begin of functon ***********************/
function updateSpantext() {
var div = $("#cc");
var num = div.children().length;
var money = 0;
for (let i = 0; i < num; i++) {
money += parseFloat($(div.children()[i]).attr("price"));
//attr()-->自定义属性的捕获
}
var str = "您选购了" + num + "本书，总价格为" + money + "元！";
$("#txt").text(str);
}
/**************** end of functon ***********************/
$(":button").click(function() {
$("#cc").children().attr("draggable", "true").css("background-color", "#fff");
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>书的拖动</title>
<style type="text/css">
li {
list-style: none;
background: green;
width: 150px;
height: 20px;
border: solid 1px;
margin: 1px;
}
.div1 {
display: flex;
width: 1000px;
height: 500px;
flex-direction: row;
}
.lbooks,
.ubooks {
display: block;
width: 400px;
height: 400px;
border: solid 2px;
margin: 10px;
}
</style>
</head>
<body>
<div class="div1">
<ul class="ubooks">
<li value="10" draggable="true">web开发 10元</li>
<li value="20" draggable="true">数据结构 20元</li>
<li value="10" draggable="true">三国演义 10元</li>
<li value="10" draggable="true">啥啥啥 10元</li>
<li value="10" draggable="true">盗墓笔记 10元</li>
<li value="10" draggable="true">西游记 10元</li>
<li value="10" draggable="true">山海经 10元</li>
<li value="10" draggable="true">礼记 10元</li>
<li value="10" draggable="true">圣经 10元</li>
<li value="10" draggable="true">福尔摩斯 10元</li>
<li value="10" draggable="true">木兰诗 10元</li>
<li value="10" draggable="true">虞妃传 10元</li>
<li value="10" draggable="true">十万个为什么 10元</li>
</ul>
<div>
<div class="lbooks" id="allBooks"></div>
<button onclick="addToSub()">解除锁定</button>
</div>
<label id="lMoney">请选择书籍</label>
</div>
<script type="text/javascript">
// 被拖拉节点
var dragged;
var money = 0;
var bookNumber = 0;
var changeMoney = document.getElementById("lMoney");
var flag = 0;
function sumPrice() {
if(money == 0) {
changeMoney.innerText = "请选择书籍";
} else {
changeMoney.innerText = "您选购了" + bookNumber + "本书，总价格为" + money + "元";
}
}
function addToSub() {
flag = 1;
var elem = document.getElementById("allBooks").children;
console.log(elem.length);
for(var i = elem.length - 1; i >= 0; i--) {
elem[i].draggable = "true";
}
console.log(elem[0].draggable);
}
// 被拖拉节点
document.addEventListener('dragstart', function(event) {
// 保存被拖拉节点
dragged = event.target;
// 被拖拉节点的背景色变透明
event.target.style.background = "yellow";
}, false);
// 被拖拉节点
document.addEventListener('dragend', function(event) {
// 被拖拉节点的背景色恢复正常
event.target.style.background = 'green';
}, false);
// 当前节点
document.addEventListener('dragover', function(event) {
// 防止拖拉效果被重置，允许被拖拉的节点放入目标节点
event.preventDefault();
}, false);
// 当前节点
document.addEventListener('dragenter', function(event) {
// 目标节点的背景色变紫色
// 由于该事件会冒泡，所以要过滤节点
if(event.target.className === 'lbooks') {
event.target.style.background = 'gray';
}
}, false);
// 当前节点
document.addEventListener('dragleave', function(event) {
// 目标节点的背景色恢复原样
if(event.target.className === 'lbooks') {
event.target.style.background = '';
}
}, false);
document.addEventListener('drop', function(event) {
// 防止事件默认行为（比如某些元素节点上可以打开链接），
event.preventDefault();
if(event.target.className === 'lbooks') {
bookNumber++;
money += dragged.value;
sumPrice();
console.log(money + "666666666666");
// 恢复目标节点背景色
event.target.style.background = '';
dragged.setAttribute("draggable", "false");
// dragged.setAttribute("class","first");
// 将被拖拉节点插入目标节点
// dragged.removeAttribute("draggable");
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
if(event.target.className === 'ubooks' && flag == 1) {
bookNumber--;
money -= dragged.value;
sumPrice();
// 恢复目标节点背景色
event.target.style.background = '';
// 将被拖拉节点插入目标节点
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
}, false);
</script>
</body>
</html>
localStorage
prototype
/*
* Complex.js:
* This file defines a Complex class to represent complex numbers.
* Recall that a complex number is the sum of a real number and an
* imaginary number and that the imaginary number i is the square root of -1.
*/
/*
* This constructor function defines the instance fields r and i on every
* instance it creates. These fields hold the real and imaginary parts of
* the complex number: they are the state of the object.
*/
function Complex(real, imaginary) {
// isNaN() 函数用于检查其参数是否是非数字值。
if(isNaN(real) || isNaN(imaginary)) // Ensure that both args are numbers.
throw new TypeError(); // Throw an error if they are not.
this.r = real; // The real part of the complex number.
this.i = imaginary; // The imaginary part of the number.
}
/*
* The instance methods of a class are defined as function-valued properties
* of the prototype object. The methods defined here are inherited by all
* instances and provide the shared behavior of the class. Note that JavaScript
* instance methods must use the this keyword to access the instance fields.
*/
// Add a complex number to this one and return the sum in a new object.
Complex.prototype.add = function(that) {
return new Complex(this.r + that.r, this.i + that.i);
};
// Multiply this complex number by another and return the product.
Complex.prototype.mul = function(that) {
return new Complex(this.r * that.r - this.i * that.i,
this.r * that.i + this.i * that.r);
};
// Return the real magnitude of a complex number. This is defined
// as its distance from the origin (0,0) of the complex plane.
//复数的模
Complex.prototype.mag = function() {
return Math.sqrt(this.r * this.r + this.i * this.i);
};
// Return a complex number that is the negative of this one.
//求负运算
Complex.prototype.neg = function() {
return new Complex(-this.r, -this.i);
};
// Convert a Complex object to a string in a useful way.
//‘{，}’字符串表示
Complex.prototype.toString = function() {
return "{" + this.r + "," + this.i + "}";
};
// Test whether this Complex object has the same value as another.
Complex.prototype.equals = function(that) {
return that != null && // must be defined and non-null
that.constructor === Complex && // and an instance of Complex 必须是Complex的是实例
this.r === that.r && this.i === that.i; // and have the same values.
};
/*
* Class fields (such as constants) and class methods are defined as
* properties of the constructor. Note that class methods do not
* generally use the this keyword: they operate only on their arguments.
*/
// Here are some class fields that hold useful predefined complex numbers.
// Their names are uppercase to indicate that they are constants.
// (In ECMAScript 5, we could actually make these properties read-only.)
//常量
Complex.ZERO = new Complex(0, 0);
Complex.ONE = new Complex(1, 0);
Complex.I = new Complex(0, 1);
// This class method parses a string in the format returned by the toString
// instance method and returns a Complex object or throws a TypeError.
Complex.parse = function(s) {
try { // Assume that the parsing will succeed
var m = Complex._format.exec(s); // Regular expression magic正则表达式 exec()方法
console.log("输出 exec()方法对象：");
console.log(m);
return new Complex(parseFloat(m[1]), parseFloat(m[2]));
} catch(x) { // And throw an exception if it fails
throw new TypeError("Can't parse '" + s + "' as a complex number.");
}
};
// A "private" class field used in Complex.parse() above.
// The underscore in its name indicates that it is intended for internal
// use and should not be considered part of the public API of this class.
Complex._format = /^\{([^,]+),([^}]+)\}$/;
//([^,]+)匹配连续出现的[^,]——>取反除，外的任意
//+等价于{1,}
//示例代码：
var c = new Complex(6, 3); //使用构造函数创建新的对象
var d = new Complex(8, 5) //用到了c的实例属性
console.log("复数加法：");
console.log(c.add(d).toString()); //使用了实例的方法
console.log("复数乘法：");
console.log(c.mul(d).toString());
console.log("求负：");
console.log(c.neg().toString());
console.log("d复数求模：");
console.log(d.mag().toString());
console.log("c复数求模：");
console.log(c.mag().toString());
console.log(Complex.parse(c.toString()))//将c转换为字符串
console.log("实例加上负数：");
console.log(Complex.parse(c.toString()). //将c转换为字符串
add(c.neg()).toString()) //加上他的复数
console.log(Complex.parse(c.toString()). //将c转换为字符串
add(c.neg()). //加上他的负数
equals(Complex.ZERO)); //结果为零
AJAX and Jqury
定时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax-练习1</title>
<style type="text/css">
p{
text-indent: 2em;
font-size: 1.2em;
}
</style>
</head>
<body>
<hr size="2" color="black">
<p id="pp1"></p>
<hr size="2">
<p id="pp2"></p>
<hr size="2">
<p id="pp3"></p>
<hr size="2">
<p id="pp4"></p>
<hr size="2">
<p id="pp5"></p>
<hr size="2">
<p id="pp6"></p>
<script type="text/javascript">
var tim=null;
var cur_p = 1;
window.onload=function(){
tim = setInterval(foo,1000);
setTimeout(stopInt,5500);
}
function foo(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
// 通信成功时，状态值为4
if (xhr.readyState === 4){
if (xhr.status === 200){
// console.log(xhr.responseText);
var para = document.getElementById('pp' + (cur_p));
console.log(xhr.responseText);
console.log(xhr.responseURL);
para.innerText = xhr.responseText;
} else {
console.error(xhr.statusText);
}
cur_p += 1;
}
console.log('请求')
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
console.log(cur_p);
xhr.open('GET','text/p'+cur_p+'.txt' , true);
xhr.send(null);
}
function stopInt(){
clearInterval(tim);
console.log('-----周期性定时器已取消！-------');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原生ajax研究</title>
<style type="text/css">
ul {
padding: 0;
}
li {
width: 340px;
line-height: 1.8em;
float: left;
border: 1px solid #f33;
/* border-radius: 10px; */
/* background-color: #0ff; */
list-style: none;
text-indent: 0.5em;
}
.menu {
float: none;
}
.menu>div {
height: 200px;
background-color: #ccf;
display: none;
}
;
</style>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<ul class="ppp">
<li class="menu">
<span>标题1</span>
<div>我是第1个div盒子</div>
</li>
<li class="menu">
<span>标题2</span>
<div>我是第2个div盒子</div>
</li>
<li class="menu">
<span>标题3</span>
<div>我是第3个div盒子</div>
</li>
<li class="menu">
<span>标题4</span>
<div>我是第4个div盒子</div>
</li>
</ul>
<hr>
<script type="text/javascript">
$(document).ready(function() {
$(".ppp>.menu").click(function() {
$(this).children('div').slideDown().parent().siblings('li').children('div').slideUp();
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
// 通信成功时，状态值为4
if(this.readyState === 4) {
if(this.status === 200) {
// console.log(xhr.responseText);
//var doc = xhr.responseXML;
var doc = this.response; // 设置过responseType 属性为document后, 通过xhr.response 或者 xhr.responseXML 获得的结果相同
var pp = doc.getElementsByTagName('body')[0];
document.body.appendChild(pp);
var stl = doc.getElementsByTagName('style')[0];
document.head.appendChild(stl);
} else {
console.error(this.statusText);
}
} else {
console.log("xhr readyState is: ", this.readyState);
}
};
xhr.onerror = function(e) {
console.error(xhr.statusText);
};
xhr.responseType = 'document';
xhr.open('GET', 'float-demo.html', true);
xhr.send(null);
});
});
</script>
</body>
</html>
flex viewPort
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>媒体查询</title>
<style type="text/css">
@media only screen and (max-width: 640px) {
.d {
width: 100%;
height: 300px;
background-color: red;
display: flex;
flex-wrap: wrap;
}
.d1 {
width: 100%;
background-color: palevioletred;
}
.d2 {
width: 100%;
background-color: gold;
}
}
@media only screen and (min-width: 641px) {
.d {
width: 100%;
height: 300px;
background-color: red;
display: flex;
flex-wrap: wrap;
}
.d1 {
width: 20%;
background-color: palevioletred;
}
.d2 {
width: 60%;
background-color: gold;
}
}
body {
display: flex;
flex-wrap: wrap;
width: 100%;
}
</style>
</head>
<body>
<div class="d"></div>
<div class="d">
<div class="d1"></div>
<div class="d2"></div>
<div class="d1"></div>
</div>
<div class="d"></div>
</body>
</html>
1259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
