前端常知识点

拼搏现实的明天。 2023-06-13 11:08 10阅读 0赞

点击图片回显，而不是点击上传按钮，可以限制图片大小

<img src="" style="text-align: center;" id="tu" width="100%" height="100px" onclick="file.click()" />

<input type="file" name="zhengmian" id="file" style="display: none" onchange="changeImg(this)" />

function changeImg(t) \{

previewImage(document.getElementById('tu'), t);

\}

function previewImage(obj, file) \{

var fileSize = file.files\[0\].size;

if(fileSize>1)\{

alert(“图片大小不能大于1M”)

\}else\{

var reader = new FileReader();

reader.onload = function(evt) \{ //这个调用应该是异步进行的

obj.src = evt.target.result; //似乎是读取目标文件的二进制数据，然后存入指定img的内存区域，

\};

reader.readAsDataURL(file.files\[0\]);

\}

\}

清空输入框

function resetAll() \{

$("\#myform").find('input\[type=text\],select,input\[type=hidden\]').each(function() \{

$(this).val('');

\});

\}

var formData = new FormData(document.getElementById("form")); //批量获取form的值，根据input的name

进入页面就刷新一次当前页面

$(document).ready(function () \{

/\*进入页面就刷新一次当前页面，很少用\*/

if(location.href.indexOf("\#reloaded")==-1)\{

location.href=location.href+"\#reloaded";

location.reload();

\}

\}）

/\*设置背景图填充整个div\*/

<div style="background-size: 100% 100%;background-image: url(img/bg.png); ">

应支付金额

</div>

/\*设置输入框背景图片，类似：![20191116155314318.png][] \*/

<style type="text/css">

.user \{

background-image: url(img/271542324711332.jpg);

/\*设置小图标\*/

background-size: 25px 25px;

/\*小图标的大小\*/

background-position: 80% 4px;

/\*小图标在input的位置\*/

background-repeat: no-repeat;

/\*背景小图标不重复\*/

padding: 8px 10px 8px 40px;

/\*设置input内边距\*/

/\*设置input样式好看\*/

border: 1px solid \#ddd;

margin: 30px;

width: 220px;

\}

</style>

<input type="text" class="user" style="border-top-left-radius: 5px;" />

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*背景图片\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

**div \{**

**background : url (/images/bg.jpg) no-repeat fixed ;**

**background-position-y: bottom ;**

**\}**

**代码详解：**

**div \{**

**background-image : url (/images/bg.jpg); /\*****设置****div****层的背景图片****\*/**

**background-repeat : no-repeat ; /\*****背景图片不重复显示****\*/**

**background-repeat : repeat ; /\*****背景图片横向及纵向重复****\*/**

**background-repeat : repeat-x ; /\*****背景图片横向重复****\*/**

**background-repeat : repeat-y ; /\*****背景图片纵向重复****\*/**

**background-attachment : fixed ; /\*****固定背景图片****\*/**

**background-attachment : scroll ; /\*****滚动背景图片****\*/**

**background-position-x: left ; /\*****背景图片在横向的最左方显示****\*/**

**background-position-x: right ; /\*****背景图片在横向的最右方显示****\*/**

**background-position-y: top ; /\*****背景图片在纵向的最上方显示****\*/**

**background-position-y: bottom ; /\*****背景图片在纵向的最下方显示****\*/**

**\}**

## 以上若有理解不到位的，望各位大佬及时指出，谢谢！QQ：820648091 ##

[20191116155314318.png]: https://img-blog.csdnimg.cn/20191116155314318.png

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关前端常见面试题：HTML常考知识点

本章先介绍一些HTML最基础的考点，很多大长面试官喜欢由浅入深地考察知识。而对于一些基础问题的回答，很多同学反而因组织不好语言而给面试官留下不好的印象。本章节我们就带大家一一整

小灰灰/ 2023年10月06日 14:57/ 0 赞/ 53 阅读

相关前端知识点

1.TCP有哪些手段保证可靠交付 TCP提供一种面向连接的、可靠的字节流服务。面向连接：意味着两个使用TCP的应用（通常是一个客户和一个服务器）在彼此交换数据之前必须先建

清疚/ 2023年08月17日 15:22/ 0 赞/ 139 阅读

相关前端常知识点

点击图片回显，而不是点击上传按钮，可以限制图片大小 <img src="" style="text-align: center;" id="tu" width="100%"

拼搏现实的明天。/ 2023年06月13日 11:08/ 0 赞/ 11 阅读

相关前端零碎知识点

第一部分 JSON的使用 JSON声明 1.JSON的声明方式一 var istype=[{'id':'字段值','text':'字段值'},

- 日理万妓/ 2023年05月30日 08:47/ 0 赞/ 140 阅读

相关前端知识点

1.onload和ready ready是在DOM文档树加载完之后执行，onload还要等所有文件加载完，所以ready比onload先执行。 window.onl

朱雀/ 2023年02月21日 06:21/ 0 赞/ 190 阅读

相关前端知识点

HTML&CSS：对Web标准的理解（结构、表现、行为）、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系，常用属性、布局、选择器、权重、盒模型、Hack、

╰+攻爆jí腚メ/ 2022年10月01日 07:50/ 0 赞/ 231 阅读

相关前端面试知识点

Doctype作用？严格模式与混杂模式如何区分？它们有何意义? HTML5 为什么只需要写 <!DOCTYPE HTML>？行内元素有哪些？块级元素有哪些？

ゝ一世哀愁。/ 2022年07月15日 22:39/ 0 赞/ 331 阅读

相关前端DOM知识点

前端DOM知识点 > `DOM`即文档对象模型（ `Document Object Model，DOM`）是一种用于 `HTML`和 `XML`文档的编程接口。它给文档提

深碍√TFBOYSˉ_/ 2022年03月02日 07:30/ 0 赞/ 351 阅读

相关前端知识点

原文文章：[前端工程师手册][Link 1] 前端知识点 HTML + CSS -------------------- 对Web标准的理解、浏览器内

你的名字/ 2021年12月12日 11:04/ 0 赞/ 469 阅读

相关前端知识点目录

基本功考察 1. 关于Html 1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化

素颜马尾好姑娘i/ 2021年09月23日 06:52/ 0 赞/ 490 阅读