1.input placeholder属性 样式修改(颜色,大小,位置)
input::-webkit-input-placeholder {
/* placeholder颜色 */
color: #aab2bd;
/* placeholder字体大小 */
font-size: 12px;
/* placeholder位置 */
text-align: right;
}
2. 点击高亮 其他失去高亮
$(this).addClass('新增样式名').siblings().removeClass('新增样式名');
3.绘制扇形函数 (原文地址)
window.drawMain = function (drawing_elem, percent, forecolor, bgcolor) {
/*
@drawing_elem: 绘制对象
@percent：绘制圆环百分比, 范围[0, 100]
@forecolor: 绘制圆环的前景色，颜色代码
@bgcolor: 绘制圆环的背景色，颜色代码
*/
var context = drawing_elem.getContext("2d");
var center_x = drawing_elem.width / 2;
var center_y = drawing_elem.height / 2;
var rad = Math.PI * 2 / 100;
var speed = 0;
// 绘制背景圆圈
function backgroundCircle() {
context.save();
context.beginPath();
context.lineWidth = 8; //设置线宽
var radius = center_x - context.lineWidth;
context.lineCap = "round";
context.strokeStyle = bgcolor;
context.arc(center_x, center_y, radius, 0, Math.PI * 2, false);
context.stroke();
context.closePath();
context.restore();
}
//绘制运动圆环
function foregroundCircle(n) {
context.save();
context.strokeStyle = forecolor;
context.lineWidth = 8;
context.lineCap = "round";
var radius = center_x - context.lineWidth;
context.beginPath();
context.arc(center_x, center_y, radius, -Math.PI / 2, -Math.PI / 2 + n * rad,
false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
context.stroke();
context.closePath();
context.restore();
}
//绘制文字
function text(n) {
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.fillStyle = forecolor;
var font_size = 40;
context.font = font_size + "px Helvetica";
var text_width = context.measureText(n.toFixed(0) + "%").width;
context.fillText(n.toFixed(0) + "%", center_x - text_width / 2, center_y + font_size / 2);
context.restore();
}
//执行动画
(function drawFrame() {
window.requestAnimationFrame(drawFrame);
context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
backgroundCircle();
text(speed);
foregroundCircle(speed);
if (speed >= percent) return;
speed += 1;
}());
}
4.使用外部字体
@font-face{
font-family: 'ruizhi';
src:url('./../font/ruizhi.ttf')
}
5.textarea去掉右侧滚动条，去掉右下角拖拽
resize: none;
6.点击div选中radio与取消
$(xxx).click(function () {
$radio = $(this).find("input[type=radio]"),
$flag = $radio.is(":checked");
if (!$flag) {
$radio.prop("checked", true);
}
})
7.PHP页面获取url参数
var xxx = "{:input(‘xxx’,'')}"
8.获取子元素中的radio文本(两级下的子元素)
$(this).find('div[class^="xxx"]').find('p[class^="xxx"]').text()
9.js设置本地缓存
localStorage.getItem("key"); //获取键的值
localStorage.setItem("key", 1); //设置键的值
保存成数组要转成json格式
JSON.parse(localStorage.getItem('key'))
localStorage.setItem('key', JSON.stringify(1));
10.正则表达式去除空格
str.replace(/\s+/g, "");
11.数组去重
var new_arr = [];
for (var i = 0; i < name_value.length; i++) {
var items = name_value[i];
if ($.inArray(items, new_arr) == -1) {
new_arr.push(items);
}
}
12.阻止事件冒泡
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
13.layer关闭弹窗
layer.close(layer.index);
14.h5将网页转为图片
window.generateImage = function () {
var _this = this;
var scale = 2;
var cntElem = $('#canvaPhoto')[0];
// 获取想要转换的dom节点
var shareContent = cntElem;
var width = document.getElementById("canvaPhoto").offsetWidth;
var height = document.getElementById("canvaPhoto").offsetHeight;
var canvas = document.createElement('canvas');
// 设置canvas元素属性宽高为 DOM 节点宽高 * 像素比
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale);
var opts = {
scale: scale,
canvas: canvas,
width: width,
height: height,
useCORS: true
};
html2canvas(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d');
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
var detail = document.getElementById("showImg");
detail.appendChild(img);
$('#canvaPhoto').hide()
$(img).css({
"width": canvas.width / 2 + 'px',
"height": canvas.height / 2 + 'px',
}).addClass('f-full');
});
}
15.禁止安卓微信网页点击图片放大的bug
img{pointer-events: none;}
16.vue高仿网易云
17.pc端鼠标移上去会漂浮
Material Design风格阴影特效效果演示_jQuery之家-自由分享jQuery、html5、css3的插件库
18.表格,表单,扇形 js
19.input type = number 去掉箭头 且 不能输入 e 和特殊字符
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
//不能输入特殊字符
onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
//限制input
