• 关于 checkbox样式 的搜索结果

回答

这是css里面分组选择器,checkbox和radio他们的样式相同,共一个样式,所以css会这样写,现在是checkbox在用这个样式,所以radio是灰色,表示现在redio样式没有使用,起作用的是checkbox

a123456678 2019-12-02 03:08:54 0 浏览量 回答数 0

回答

大概的思路就是,你维护一个购物车内的商品id列表对应的checkbox,当触发全选的按钮事件时,你在js代码里将商品id列表遍历得到所有checkbox,并触发选中样式。jquery或者vue都可以做。相应的demo 可以百度搜索“jquery checkbox 全选”,相信会有很多解答。

Zzz 2019-12-02 02:28:37 0 浏览量 回答数 0

回答

HTML通常我们使用以下html结构,我们给复选框定义id#checkbox_a1,然后使用label的for属性与之关联,这样的话,用户点击label的时候,实际上就相当于点击了#checkbox_a1。`check `CSS通过label和checkbox,我们可以将checkbox隐藏,而将label制作为各种漂亮超酷的复选框样式。我们可以使用:before和:after伪元素来制作各种效果,如滑动按钮的效果。这些效果都可以通过相邻兄弟选择器来选择与checkbox相邻的label来实现,下面是一个简单的例子: .chk_1 { display: none; } .chk_1 + label { background-color: #FFF; border: 1px solid #C1CACA; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); padding: 9px; border-radius: 5px; display: inline-block; position: relative; margin-right: 30px; } .chk_1 + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } .chk_1:checked + label { background-color: #ECF2F7; border: 1px solid #92A1AC; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); color: #243441; } .chk_1:checked + label:after { content: '\2714'; //勾选符号 position: absolute; top: 0px; left: 0px; color: #758794; width: 100%; text-align: center; font-size: 1.4em; padding: 1px 0 0 0; vertical-align: text-top; } 浏览页面效果,当点击label的时候,复选框出现勾选符号,表示选中状态,再次点击时,勾选符号消失,表示取消选中状态。DEMO中,我们提供了4个示例,基本可以满足页面常见的复选框样式需求,有需要的可以直接下载源代码,复制css样式即可。你也可以根据项目需求对css样式进行适当修改。补充说明复选框的美化效果可以在IE9+浏览器中支持,那么ie8及以下浏览器需要恢复默认样式,使用以下代码: <!--[if lte IE 8]> <link href="ie8.css" rel="stylesheet" />

小旋风柴进 2019-12-02 02:31:16 0 浏览量 回答数 0

新用户福利专场,云服务器ECS低至102元/年

新用户专场,1核2G 102元/年起,2核4G 699.8元/年起

问题

无法用jquery操作checkbox选中的问题

小旋风柴进 2019-12-01 20:22:21 821 浏览量 回答数 1

问题

checkbox复选改为单选(还是方框),是否合理,是否有悖人机交互?

a123456678 2019-12-01 19:25:30 793 浏览量 回答数 1

问题

【Android5.0】使用sildingmenu和fragment做筛选菜单

爵霸 2019-12-01 20:01:19 882 浏览量 回答数 1

问题

jq 如何根据id逐个赋值?

杨冬芳 2019-12-01 19:52:55 889 浏览量 回答数 1

问题

为什么 Bootstrap 动态生成的元素没有 CSS 样式

小旋风柴进 2019-12-01 19:24:50 1090 浏览量 回答数 1

问题

求一个jquery插件 facebook checkbox样式

a123456678 2019-12-01 20:17:34 866 浏览量 回答数 1

问题

我发现一个界面小bug

张见外 2019-12-01 21:26:46 4134 浏览量 回答数 1

回答

checkbox和radiobox已经是约定俗成的了,人为去重定义它的行为我认为是有问题的。如果你想风格搭配,最好重新设计这两个框的样式,而不是用一个去兼容实现另外一个。

a123456678 2019-12-02 02:19:58 0 浏览量 回答数 0

回答

可以使用jQuery 遍历中的 not() 方法来排除某些元素,例如根据元素的id,class等排除,示例代码 $("div.content ").not(".keep"); // 表示content类的div下除keep类以外的所有元素;另外,注意表示所有元素 下面给出实例演示:删除content类的div下除keep类以外的所有元素 创建Html元素<div class="box"> <span>点击按钮删除下面绿色框中所有不是keep类的元素,keep类的元素用红色区分。</span><br> <div class="content"> <input type="checkbox" name="item"><span>萝卜</span> <input type="checkbox" name="item"><span>青菜</span> <input type="checkbox" name="item" class="keep"><span class="keep">小葱</span><br> <input type="checkbox" name="item" class="keep"><span class="keep">豆腐</span> <input type="checkbox" name="item"><span>土豆</span> <input type="checkbox" name="item"><span>茄子</span><br> <input type="text" value="我也不是keep类的"> </div> <input type="button" value="删除"></div> 设置css样式div.box{width:300px;height:200px;padding:10px 20px;border:4px dashed #ccc;}div.box>span{color:#999;font-style:italic;}.keep{color:red;}div.content{width:250px;height:100px;margin:10px 0;border:1px solid green;}input{margin:10px;}input[type='button']{width:200px;height:35px;margin:10px;border:2px solid #ebbcbe;} 编写jquery代码$(function(){ $("input:button").click(function() { $("div.content ").not(".keep").each(function() { // ""表示div.content下的所有元素 $(this).remove(); }); });}) 观察显示效果 删除前 删除后 答案来源于网络

养狐狸的猫 2019-12-02 02:19:43 0 浏览量 回答数 0

问题

如何更改radio、checkbox选项框背景图?

杨冬芳 2019-12-01 19:42:55 1047 浏览量 回答数 1

回答

HTML5究竟是什么? (注:目前网上介绍HTML5的文章都是千篇一律,譬如某个时间段发布某个版本,这种对于初学者或者从实用性角度来看,没有太多甚至完全不具备学习价值,只能说了解到它的出现时间,但是具体作用是什么呢?基本都是没有详细阐述,不少读者看完估计还是一头雾水的,因此笔者会用更加通俗易懂的话语,让各位能够知道HTML5究竟是什么) 首先HTML是定义了网页的结构,那么HTML5则是其不断更新的一部分。它目前有两个版本, 第一个是万维网联盟的5.2推荐标准(w3c) ,是为网页内容开发者设计的;第二个是浏览器开发者的 HTML 生活标准(HTML Living Standard) ,由微软网页超文本技术工作小组公司(WHATWG)维护。 HTML5引入了一些新的元素和属性,同时也是一个 W3C推荐标准。Web 应用程序以这些 HTML 元素为基础运行,同时包含了 HTML4和 XHTML,但是向后兼容以前的版本。另外,它与 PHP 更加兼容,新的 api 包括拖放、网络消息和网络存储、协议处理程序注册、微数据、画布、文本轨道和定时媒体播放,还有一个标准化的服务器发送事件自动更新和更好的浏览器支持,这些新的 api 为网页设计者提供了更好的控制。对于生活标准版本,新的 API 还包括地理定位、web 音频(Javascript 音频应用程序)、web RTC 和 web 加密 API。 这些元素和属性反映了现代网站的典型用法,其中包括超文本标记语言和对文档对象模型(DOM)脚本的新兴趣。HTML5语法还允许在文档内部使用 MathML,而 indexeddb将存储扩展到本地存储之外。并且从 HTML 4.01中删除了一些不推荐的元素,包括像 font 和 center 这样的纯表示元素,这些元素的效果早已被更强大的层叠样式表所取代。此外,DOM 脚本在 Web 行为中的重要性也得到了重新强调。 HTML5知识点有哪些? 经过前面的一些讲解,相信各位对HTML5已经有初步的认识,那么接下来我们将会正式探讨下,究竟有哪些知识点需要我们学习掌握的呢?(注:由于HTML5涵盖知识点较多,且本文属于入门级别的知识指南,不适宜进行全面深入地讲解,因此笔者筛选出了必须掌握的知识点,希望能够让初学者迅速入门) 知识点一:HTML5主体结构 <!doctype> 声明必须位于 HTML5 文档中首行,声明此为HTML5文档 标签限定了文档的开始点和结束点,内部包含文档头部和主体 标签用于定义文档的头部,内部的元素可以引用脚本或者样式表、提供元信息等等,并且描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等,绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 标签声明使用utf-8编码 标签定义文档标题 定义文档的主体,内部包含文档的所有内容,比如文本、超链接、图像、表格和列表等等,均可展示给用户浏览器显示出来(注释除外) 以上就是HTML5主体结构的讲解,可能有细心地读者就会发现,有的标签是一个的,有的又是两个对称的,那么这是何解呢? 这里就引入一个知识点,通常情况下绝大多数标签都是双标签,也就是需要写成格式,但是也有的单标签也称为自闭合标签是不需要结束符的,如 等,那么这些标签具体用法又是如何呢?下面我们将会进行常用标签的讲解! 知识点二:HTML5常用标签 众所周知,HTML5简单点说就是由一个个标签组成的文档,既然如此我们就需要学习,每一个标签究竟代表着什么含义如何使用呢?(因为标签实在太多,倘若全部阐释一遍,怕初学者们嫌弃篇幅太长感到枯燥,或者是知识点太多很难吸收掌握,因此笔者精选出一些较为常用的标签进行讲解,对于标签可能有多个属性可以选择,笔者同样会挑选出较为常用属性进行讲解) 注:以下标签,笔者没有截效果图,建议初学者自主尝试 注释标签:在我们日常编写代码时候,为了日后方便自己查看或者是别人查阅,我们通常会在某些地方写上注释标签,里面内容不会展示给浏览器用户看到 阿里云开发者社区 链接标签:超链接跳转,把需要跳转的网址写到标签的href里面,然后在开始标签和结束标签之间可以写内容展示出去,当用户点击内容将会发生跳转 换行标签:换行作用,有的小伙伴可能看到这里会说,为什么我写也是有效果的呢?这种写法不能说错误只能说是老版本的规范,按照HTML4.0规范都需要按照XHTML的写法,也就是对于单标签都是采用加斜杠的写法(下同) 按钮 按钮标签:按钮上需要展示什么文字,可在开始标签和结束标签之间写入,现阶段若写静态网站用得较少,后期学JS制作动态网站或者做交互时候比较常用 内容 块级标签:标签本身没有特殊含义,那么在其里面可以写文本内容,或者是加入其它标签均可,凡是加入其内部所有东西都会被其所包裹,形成一个独立的块级区域并且独自占用一行(css可格式化) 标题 标题标签:用于定义标题,从h1至h6均可根据自身需求选择 分隔符标签:起到装饰分隔作用,默认显示为一条黑色的水平线 图片标签:展示图片,src里面放置图片的链接,然后有时候可能出现各种原因导致图片未能加载,那么系统会自动展示alt里面的文字内容 输入框标签:默认是输入框,当然其有多个属性可以选择,然后较为常用的是type属性,该属性又有多个值可供选择,如: password 用户输入任何文本内容均会显示为小圆点 checkbox 选择框 Button按钮 列表 列表标签:通常用于展示一列数据,而且数据所采用的css样式均相同,譬如导航栏、当然还有 有序列表不过较为少用 段落 段落标签:写在内部的一段文字将会被定义为一个段落 脚本标签:现阶段不会用到,等学习到js需要用到,初学者可在标签内部写js代码,随着学习深入可以采用外部写好js文件后导入 文字 脚本标签:通常需要搭配css样式进行使用,对部分内容进行样式修改 样式标签:现阶段不会用到,等学习到css需要用到,样式需要写在标签内部 HTML5入门知识指南 经过前面的一系列学习,相信各位已经初步掌握HTML5的使用,能够制作一些简单的界面了,当然对于学习能力较强或者有一定基础的同学,可以自主深入学习HTML5深层次的知识点,当能够熟练敲出你想要的界面时候,那建议开始学习CSS让界面变得更加美丽,笔者下期将会给各位带来CSS入门知识指南,欢迎大家踊跃参与学习,当然如果有童鞋看完本文,对于某些知识点还是不太明白,或者是对下一期学习有什么建议,欢迎各位在下方评论区留言哦,如果觉得笔者文章写得不错,那么也可以分享给朋友一起学习,咱们下期再见啦!

剑曼红尘 2020-03-03 17:56:06 0 浏览量 回答数 0

问题

<a>的text-decoration设置无效

杨冬芳 2019-12-01 19:37:29 1912 浏览量 回答数 1

问题

【CSS学习全家桶】416道CSS热门问题,阿里百位技术专家答疑解惑

管理贝贝 2019-12-01 20:07:24 8458 浏览量 回答数 1

回答

######??看不到不知道你回复什么,###### <?php session_start(); header('Content-type: image/png'); //创建图片 $im = imagecreate($x=130,$y=45 ); $bg = imagecolorallocate($im,rand(50,200),rand(0,155),rand(0,155)); //第一次对 imagecolorallocate() 的调用会给基于调色板的图像填充背景色 $fontColor = imageColorAllocate ( $im, 255, 255, 255 ); //字体颜色 $fontstyle = 'rock.ttf'; //字体样式,这个可以从c:\windows\Fonts\文件夹下找到,我把它放到和authcode.php文件同一个目录,这里可以替换其他的字体样式 //产生随机字符 for($i = 0; $i < 4; $i ++) { $randAsciiNumArray = array (rand(48,57),rand(65,90)); $randAsciiNum = $randAsciiNumArray [rand ( 0, 1 )]; $randStr = chr ( $randAsciiNum ); imagettftext($im,30,rand(0,20)-rand(0,25),5+$i*30,rand(30,35),$fontColor,$fontstyle,$randStr); $authcode .= $randStr; } $_SESSION['authcode'] = $randFourStr;//用户和用户输入的验证码做比较 //干扰线 for ($i=0;$i<8;$i++){ $lineColor = imagecolorallocate($im,rand(0,255),rand(0,255),rand(0,255)); imageline ($im,rand(0,$x),0,rand(0,$x),$y,$lineColor); } //干扰点 for ($i=0;$i<250;$i++){ imagesetpixel($im,rand(0,$x),rand(0,$y),$fontColor); } imagepng($im); imagedestroy($im); ?> 转自: http://www.cnblogs.com/terryglp/articles/1774132.html   ###### for($i=0;$i<50;$i++){//加入干扰元素 imagesetpixel($img,rand()p,rand()0,$black);//加入点状干扰素 imagesetpixel($img,rand()p,rand()0,$red); imagesetpixel($img,rand()p,rand()0,$gray); //imagearc($im,rand()p,rand()p,20,20,75,170,$black);//加入弧线干扰素 //imagearc($im,rand()p,rand()p,rand()p,rand()p,$red);//加入弧线干扰素 } 这段代码有问题的 rand()p 不能这么写 ###### <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="center" align="center"> <p align="center"><strong><font size="+4">用户登录</font></strong></p> <form action="/sy20/logindo.php" method="post"> 用户名:<input type="text" name="username" size='21' value=""/> <br /> 密 码: <input type="password" name="password" size="20"/> <br /> 验证码: <input type="text" name="code" size="10"/> <img alt="看不清楚,换一张" id="code" src="png1.php" style="cursor: pointer; vertical-align:middle;" onclick="create_code()"/> <button type="button" onClick="create_code()">更换</button> </br> <p align="center"><input type="checkbox" name="save" value="1"/> 是否保存用户名     <a href="##">忘记密码?</a></p> <br /> <input type="submit" value="登录" name="login" data-ajax='false'/> <input type="submit" value="注册" name="zhuce"/> </form> </div> <script> function create_code(){ document.getElementById('code').src='png1.php?'+Math.random()*10000; } </script> </body> </html> ###### 引用来自“氪金”的评论 <?php session_start(); header('Content-type: image/png'); //创建图片 $im = imagecreate($x=130,$y=45 ); $bg = imagecolorallocate($im,rand(50,200),rand(0,155),rand(0,155)); //第一次对 imagecolorallocate() 的调用会给基于调色板的图像填充背景色 $fontColor = imageColorAllocate ( $im, 255, 255, 255 ); //字体颜色 $fontstyle = 'rock.ttf'; //字体样式,这个可以从c:\windows\Fonts\文件夹下找到,我把它放到和authcode.php文件同一个目录,这里可以替换其他的字体样式 //产生随机字符 for($i = 0; $i < 4; $i ++) { $randAsciiNumArray = array (rand(48,57),rand(65,90)); $randAsciiNum = $randAsciiNumArray [rand ( 0, 1 )]; $randStr = chr ( $randAsciiNum ); imagettftext($im,30,rand(0,20)-rand(0,25),5+$i*30,rand(30,35),$fontColor,$fontstyle,$randStr); $authcode .= $randStr; } $_SESSION['authcode'] = $randFourStr;//用户和用户输入的验证码做比较 //干扰线 for ($i=0;$i<8;$i++){ $lineColor = imagecolorallocate($im,rand(0,255),rand(0,255),rand(0,255)); imageline ($im,rand(0,$x),0,rand(0,$x),$y,$lineColor); } //干扰点 for ($i=0;$i<250;$i++){ imagesetpixel($im,rand(0,$x),rand(0,$y),$fontColor); } imagepng($im); imagedestroy($im); ?> 转自: http://www.cnblogs.com/terryglp/articles/1774132.html   我把你给的这段代码放上去,还是没有显示 ######首先确认,你直接运行 png.php (暨我帖的生成图片的那段程序),是出什么结果,弄不好你没有开gd库。######ob_clean()

kun坤 2020-06-06 18:34:54 0 浏览量 回答数 0

回答

######??看不到不知道你回复什么,###### <?php session_start(); header('Content-type: image/png'); //创建图片 $im = imagecreate($x=130,$y=45 ); $bg = imagecolorallocate($im,rand(50,200),rand(0,155),rand(0,155)); //第一次对 imagecolorallocate() 的调用会给基于调色板的图像填充背景色 $fontColor = imageColorAllocate ( $im, 255, 255, 255 ); //字体颜色 $fontstyle = 'rock.ttf'; //字体样式,这个可以从c:\windows\Fonts\文件夹下找到,我把它放到和authcode.php文件同一个目录,这里可以替换其他的字体样式 //产生随机字符 for($i = 0; $i < 4; $i ++) { $randAsciiNumArray = array (rand(48,57),rand(65,90)); $randAsciiNum = $randAsciiNumArray [rand ( 0, 1 )]; $randStr = chr ( $randAsciiNum ); imagettftext($im,30,rand(0,20)-rand(0,25),5+$i*30,rand(30,35),$fontColor,$fontstyle,$randStr); $authcode .= $randStr; } $_SESSION['authcode'] = $randFourStr;//用户和用户输入的验证码做比较 //干扰线 for ($i=0;$i<8;$i++){ $lineColor = imagecolorallocate($im,rand(0,255),rand(0,255),rand(0,255)); imageline ($im,rand(0,$x),0,rand(0,$x),$y,$lineColor); } //干扰点 for ($i=0;$i<250;$i++){ imagesetpixel($im,rand(0,$x),rand(0,$y),$fontColor); } imagepng($im); imagedestroy($im); ?> 转自: http://www.cnblogs.com/terryglp/articles/1774132.html   ###### for($i=0;$i<50;$i++){//加入干扰元素 imagesetpixel($img,rand()p,rand()0,$black);//加入点状干扰素 imagesetpixel($img,rand()p,rand()0,$red); imagesetpixel($img,rand()p,rand()0,$gray); //imagearc($im,rand()p,rand()p,20,20,75,170,$black);//加入弧线干扰素 //imagearc($im,rand()p,rand()p,rand()p,rand()p,$red);//加入弧线干扰素 } 这段代码有问题的 rand()p 不能这么写 ###### <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="center" align="center"> <p align="center"><strong><font size="+4">用户登录</font></strong></p> <form action="/sy20/logindo.php" method="post"> 用户名:<input type="text" name="username" size='21' value=""/> <br /> 密 码: <input type="password" name="password" size="20"/> <br /> 验证码: <input type="text" name="code" size="10"/> <img alt="看不清楚,换一张" id="code" src="png1.php" style="cursor: pointer; vertical-align:middle;" onclick="create_code()"/> <button type="button" onClick="create_code()">更换</button> </br> <p align="center"><input type="checkbox" name="save" value="1"/> 是否保存用户名     <a href="##">忘记密码?</a></p> <br /> <input type="submit" value="登录" name="login" data-ajax='false'/> <input type="submit" value="注册" name="zhuce"/> </form> </div> <script> function create_code(){ document.getElementById('code').src='png1.php?'+Math.random()*10000; } </script> </body> </html> ###### 引用来自“氪金”的评论 <?php session_start(); header('Content-type: image/png'); //创建图片 $im = imagecreate($x=130,$y=45 ); $bg = imagecolorallocate($im,rand(50,200),rand(0,155),rand(0,155)); //第一次对 imagecolorallocate() 的调用会给基于调色板的图像填充背景色 $fontColor = imageColorAllocate ( $im, 255, 255, 255 ); //字体颜色 $fontstyle = 'rock.ttf'; //字体样式,这个可以从c:\windows\Fonts\文件夹下找到,我把它放到和authcode.php文件同一个目录,这里可以替换其他的字体样式 //产生随机字符 for($i = 0; $i < 4; $i ++) { $randAsciiNumArray = array (rand(48,57),rand(65,90)); $randAsciiNum = $randAsciiNumArray [rand ( 0, 1 )]; $randStr = chr ( $randAsciiNum ); imagettftext($im,30,rand(0,20)-rand(0,25),5+$i*30,rand(30,35),$fontColor,$fontstyle,$randStr); $authcode .= $randStr; } $_SESSION['authcode'] = $randFourStr;//用户和用户输入的验证码做比较 //干扰线 for ($i=0;$i<8;$i++){ $lineColor = imagecolorallocate($im,rand(0,255),rand(0,255),rand(0,255)); imageline ($im,rand(0,$x),0,rand(0,$x),$y,$lineColor); } //干扰点 for ($i=0;$i<250;$i++){ imagesetpixel($im,rand(0,$x),rand(0,$y),$fontColor); } imagepng($im); imagedestroy($im); ?> 转自: http://www.cnblogs.com/terryglp/articles/1774132.html   我把你给的这段代码放上去,还是没有显示 ######首先确认,你直接运行 png.php (暨我帖的生成图片的那段程序),是出什么结果,弄不好你没有开gd库。######ob_clean()

montos 2020-05-30 17:01:42 0 浏览量 回答数 0

回答

转自: http://www.cnblogs.com/terryglp/articles/1774132.html   ###### for($i=0;$i<50;$i++){//加入干扰元素 imagesetpixel($img,rand()p,rand()0,$black);//加入点状干扰素 imagesetpixel($img,rand()p,rand()0,$red); imagesetpixel($img,rand()p,rand()0,$gray); //imagearc($im,rand()p,rand()p,20,20,75,170,$black);//加入弧线干扰素 //imagearc($im,rand()p,rand()p,rand()p,rand()p,$red);//加入弧线干扰素 } 这段代码有问题的 rand()p 不能这么写 ###### <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="center" align="center"> <p align="center"><strong><font size="+4">用户登录</font></strong></p> <form action="/sy20/logindo.php" method="post"> 用户名:<input type="text" name="username" size='21' value=""/> <br /> 密 码: <input type="password" name="password" size="20"/> <br /> 验证码: <input type="text" name="code" size="10"/> <img alt="看不清楚,换一张" id="code" src="png1.php" style="cursor: pointer; vertical-align:middle;" onclick="create_code()"/> <button type="button" onClick="create_code()">更换</button> </br> <p align="center"><input type="checkbox" name="save" value="1"/> 是否保存用户名     <a href="##">忘记密码?</a></p> <br /> <input type="submit" value="登录" name="login" data-ajax='false'/> <input type="submit" value="注册" name="zhuce"/> </form> </div> <script> function create_code(){ document.getElementById('code').src='png1.php?'+Math.random()*10000; } </script> </body> </html> ###### 引用来自“氪金”的评论 <?php session_start(); header('Content-type: image/png'); //创建图片 $im = imagecreate($x=130,$y=45 ); $bg = imagecolorallocate($im,rand(50,200),rand(0,155),rand(0,155)); //第一次对 imagecolorallocate() 的调用会给基于调色板的图像填充背景色 $fontColor = imageColorAllocate ( $im, 255, 255, 255 ); //字体颜色 $fontstyle = 'rock.ttf'; //字体样式,这个可以从c:\windows\Fonts\文件夹下找到,我把它放到和authcode.php文件同一个目录,这里可以替换其他的字体样式 //产生随机字符 for($i = 0; $i < 4; $i ++) { $randAsciiNumArray = array (rand(48,57),rand(65,90)); $randAsciiNum = $randAsciiNumArray [rand ( 0, 1 )]; $randStr = chr ( $randAsciiNum ); imagettftext($im,30,rand(0,20)-rand(0,25),5+$i*30,rand(30,35),$fontColor,$fontstyle,$randStr); $authcode .= $randStr; } $_SESSION['authcode'] = $randFourStr;//用户和用户输入的验证码做比较 //干扰线 for ($i=0;$i<8;$i++){ $lineColor = imagecolorallocate($im,rand(0,255),rand(0,255),rand(0,255)); imageline ($im,rand(0,$x),0,rand(0,$x),$y,$lineColor); } //干扰点 for ($i=0;$i<250;$i++){ imagesetpixel($im,rand(0,$x),rand(0,$y),$fontColor); } imagepng($im); imagedestroy($im); ?> 转自: http://www.cnblogs.com/terryglp/articles/1774132.html   我把你给的这段代码放上去,还是没有显示 ######首先确认,你直接运行 png.php (暨我帖的生成图片的那段程序),是出什么结果,弄不好你没有开gd库。######ob_clean()

kun坤 2020-05-27 13:11:37 0 浏览量 回答数 0

问题

为什么我的php文件生存的验证码图片在浏览器不显示 403.10 禁止访问:配置无效 

kun坤 2020-05-27 10:52:47 5 浏览量 回答数 1

问题

有一jsp,可文件上传。在swing嵌入浏览器,访问jsp,文件上传失败,服务端未接收到请求

java萌新0321 2020-06-19 10:49:35 20 浏览量 回答数 1

问题

PHP实现DataGrid,报错?

一枚小鲜肉帅哥 2020-06-20 19:39:04 0 浏览量 回答数 1

问题

【javascript学习全家桶】934道javascript热门问题,阿里百位技术专家答疑解惑

管理贝贝 2019-12-01 20:07:22 6202 浏览量 回答数 1

回答

先说结论: 不要对接!不要对接!不要对接! 开个玩笑,以上仅代表个人观点,大家也知道这种“三体式警告”根本没有用的,我自己也研究如何对接,说不定做完后就觉得“真香”了。 为什么要对接? 首先讨论一下为什么要把 Flutter 对接到 Web 生态。 Flutter 现在是一个炙手可热的跨平台技术,能够一套代码运行在 Android、iOS、PC、IoT 以及浏览器上,被认为是下一代跨平台技术。相比于 Weex 和 React Native 可以很好地解决多平台一致性问题,原生渲染性能相近,上层没有 JS 那么厚的封装层次,整体性能会略好一些。 但是大部分兴冲冲去学 Flutter 的人疑惑的第一个问题就是:为什么 Flutter 要用 Dart?一个全新的语言意味着新的学习成本,难道 JS 不香吗?JS 不香不是还有 TypeScript 吗!事实上 Flutter 抛弃的岂止是 JS 这门语言,也抛弃了 HTML 和 CSS,设计了一套解耦得更好的 Widget 体系,Flutter 抛弃的是整个 Web,致力于打造一个新的生态,但是这个生态无法复用 Web 生态的代码和解决方案。尤其是之前所有跨平台方案 Hybrid、React Native、Weex 都是对接 Web 生态的,这让 Flutter 显得有些格格不入,也让大部分前端开发者望而却步。 下面是我整理出来的,前端开发者使用 Flutter 的各方面成本: 因为 Flutter 的开发模式和前端框架比较像(可以说就是抄的 React),所以框架的学习成本并不高,稍微高一些的是 Dart 语言的学习成本,另外还要学习如何用 Widget 组装 UI,虽然很多布局 Widget 设计得和 CSS 很像,灵活度还是差了很多。要想在真实项目中用起来,还要改造整个工具链,以“Native First”的视角做开发,开发 Flutter 和开发原生应用的链路是比较像的,和开发前端页面有较大差异。最高的还是生态成本,前端生态的积累无论是代码还是技术方案都很难复用,这是最痛的一点,生态也是 Flutter 最弱的一环。 无论是为了先进的技术理念还是出于商业私心,先不管 Flutter 为什么抛弃 Web 生态,现实问题是最大的 UI 开发者群体是前端,最丰富的生态是 Web 生态,我觉得 Web 技术也是开发 UI 最高效的方式。如果能在上层使用 Web 技术栈开发,在底层使用 Flutter 实现跨平台渲染,不是可以很好的兼顾开发效率、性能和跨平台一致性吗?还能复用 Web 技术栈大量的技术积累。 可能这些理由也不够充分,暂且先照着这个假设继续分析,最后再重新讨论到底该不该对接。 关于 Flutter 和 Web 生态的对接涉及两个方面: 从 Web 到 Flutter。就是使用 Web 技术栈来开发,然后对接到 Flutter 上实现跨平台渲染。对 Web 来说是解决性能和跨平台一致性问题,对 Flutter 来说是解决生态复用问题。从 Flutter 到 Web。就是官方已经实现的 Web support for Flutter,把已经用 Dart 开发好的 App 编译成 HTML/JS/CSS 然后运行在浏览器上,可以用于降级和外投场景。 如何实现“从 Web 到 Flutter”? 首先分析一下 Flutter 的架构图,看看可以从哪里下手。 Flutter 可以分为 Framework 和 Engine 两部分,Engine 部分比较底层也比较稳定了,最好不要动,需要改的是用 Dart 实现的 Framework。要想对接 Web 生态的话,JS 引擎肯定是要引入的,至于是否保留 Dart VM 有待讨论。图中最上面 Material 和 Cupertino 两个 UI 库前端是不需要的,前端有自己的。关键是 Widget 这部分,是替换成 HTML/CSS 的方式写 UI,还是继续保留 Widget 但是把语言换成 JS,不同方案给出的解法也不一样。 有不少方案可以实现对接,业界有挺多尝试的,我总结了下面三种方式: - TS 魔改:用 JS 引擎替换掉 Dart VM,用 JS/TS 重新实现 Flutter Framework(或者直接 dart2js 编译过来)。 - JS 对接:引入 JS 引擎同时保留 Dart VM,用前端框架对接 Flutter Framework。 - C++ 魔改:用 JS 引擎替换掉 Dart VM,用 C++ 重新实现 Flutter Framework。 TS 魔改 TS 魔改就是完全抛弃掉 Dart VM,用 TypeScript 重新实现一遍用 Dart 写的 Flutter Framework。 为啥是 TS 而不是 JS?这不是因为 TS 是个大热门嘛,而且向下兼容 JS,现在几乎所有时髦的框架都要用 TS 重写了。 这种方案的出发点是“如果能把 Flutter 的 Dart 换成 JS 就好了”,最容易想到的路就是把 Dart 翻译成 TS,或者直接用 dart2js 把代码编译成 js,但是编译出来的代码包含很多 dart:ui 之类的库的封装,生成的包也挺大的,也比较难定制需要导出的接口,不如干脆用 TS 重写一遍,工具链更熟悉一些,还可以加一些定制。 理论上讲翻译之后 Flutter 绝大部分功能都依然支持,可以复用各种 npm 包,还可以动态化,但是丧失了 AOT 能力,JS 语言的执行性能应该是不如 Dart 的。而且所有节点的布局运算都发生在 JS,底层只需要提供基础的图形能力就好了,就好像是基于 Canvas API 写了一套 UI 框架,性能未必有现存前端框架的性能高。 此外最大的问题是如何与官方 Flutter 保持一致,假如现在是从 v1.13 版本翻译过来的,以后官方升级到了 v1.15 要不要同步更新?这个过程没啥技术含量,而且需要持续投入,做起来比较恶心。 另外还需要考虑上层是用 Widget 的方式写 UI,还是用前端熟悉的 HTML+CSS。如果依然用 Widget 的话,那大部分前端组件还是用不了的,UI 还是得重写一遍。反正要重写的话,成本也没降下来,那就用 Dart 重写呗…… 直接用官方原版 Flutter 也避免每次更新都要翻译一遍 Dart 代码。所以既然选择了对接前端生态,那就要对接 CSS,不然就没有足够的价值。然而 CSS 和 Widget 的对接也是很繁琐的过程,而且存在完备性问题。 JS 对接 翻译代码的方式不够优雅,那就保留 Dart,把 JS/CSS 对接到 Widget 上面不就好了? 当然可以,这种方式是仅把 Flutter 当做了底层的渲染引擎,上层保持前端框架的写法,仅把渲染部分对接到 Flutter。现存的很多前端框架都把底层渲染能力做了抽象,可以对接到不同渲染引擎上,如 Vue/Rax 同时支持浏览器和 Weex,用同样的方式,可以再支持一个 Flutter。 这种方式对前端框架的兼容性比较好,但是链路太长了,业务代码调用前端框架接口做渲染,一顿操作之后发出了渲染指令,这个渲染指令要基于通信的方式传给 Flutter Framework,这中间涉及一次 JS 到 C++ 再到 Dart 的跨语言转换,然后再接收到渲染指令之后还要转成相应的 Widget 树,从 CSS 到 Widget 的转换依然很繁琐。而且 Widget 本身是可以带有状态的,本身就是响应式更新的,在更新时会重新生成 widget 并 diff,如果在前端更新 UI 的话,前端框架在 js 里 diff 一次 vdom,传到 Flutter 之后又 diff 一次 widget。 如果要绕过 Widget 直接对接图中的 Rendering 这一层,可以绕过 widget diff 但是得改 Flutter Framework 的渲染链路,既然要改 Flutter Framework 那为什么不直接用 TS 魔改呢,还绕过了 JS 到 Dart 的通信,又回到了第一种方案。 总结来说,这个方案的优点是:实现简单、能最大化保留前端开发体验,缺点是:渲染链路长、通信成本高、响应式逻辑冲突、CSS 转 Widget 不完备等。 C++ 魔改 想要干掉 Dart VM,就需要用其他语言重新实现用 Dart 开发的 Framework,用 JS/TS 可以,用 C++ 当然可以,最硬核的方式就是用 C++ 重新实现 Flutter 的 Framework,然后接入 JS 引擎,通过 binding 把 C++ 接口透出到 JS 环境,上层应用还是用 JS 做开发。 把 Framework 层下沉到 C++ 之后,不仅会有更好的性能,也能支持更多语言。原本 Flutter Framework 是在 Dart VM 之上的,必须依赖 Dart VM 才能运行,所以对 Dart 有强依赖;用 C++ 重新实现之后,JS 引擎是在 C++ 版 Framework 之上的,框架本身并不依赖 JS 引擎,还可以对接其他各种语言,如对接了 JVM 之后可以支持 Java 和 Kotlin,对接回 Dart VM 可以继续支持 Dart。 这个方案可以增强性能,也能保持和 Flutter 的一致性,但是改造成本和维护成本都相当高。C++ 的开发效率肯定不如 Dart,当 Flutter 快速迭代之后如何跟进是很大的问题,如果跟进不及时或者实现不一致那很可能就分化了。从 CSS 到 Widget 的转换也是不得不面对的问题。 几种方案对比 把上面几种方案画在同一张图里是这个样子的: 图中实线部分表示了跨语言的通信,太过频繁会影响性能,虚线部分表示了其他对接可能性。 从下到上,Flutter Engine 是不需要动的,这一层是跨平台的关键。Framework 则有三种语言版本,JS/TS、Dart、C++,性能是 C++ 版本最好,成本是 Dart 版本最低。然后还需要向上处理 HTML/CSS 和 Widget 的问题,可以直接对接一个前端框架,也可以直接在 C++ 层实现(不然需要透出的 binding 接口就太多了,用通信的方式也太过频繁了)。 如何实现“从 Flutter 到 Web”? 这个功能官方已经实现了,可以把使用 Dart 开发的 App 编译成 Web App 运行在浏览器上,官方文档以介绍用法和 API 为主,我这里简单分析一下内部具体的实现方案。 实现原理 结合 Flutter 的架构图来看,要实现 Web 到 Flutter 需要改造的是上层 Framework,要实现 Flutter 到 Web 需要改造的则是底层 Engine。 Framework 对 Engine 的核心依赖是 dart:ui,这是库是在 Engine 里实现的,抽象出了绘制 UI 图层的接口,底层对接 skia 的实现,向上透出 Dart 语言的接口。这样来看,对接方式就比较简单了: 使用 dart2js 把 Framework 编译成 JS 代码。基于浏览器的 API 重新实现 dart:ui,即 dart:web_ui。 把 Dart 编译成 JS 没什么问题,性能可能会有一点影响,功能都是可以完全保留的,关键是 dart:web_ui 的实现。在原生 Engine 中,dart:ui 依赖 skia 透出的 SkCanvas 实现绘制,这是一套很底层的图形接口,只定义了画线、画多边形、贴图之类的底层能力,用浏览器接口实现这一套接口还是很有挑战的。上图可以看到 Web 版 Engine 是基于 DOM 和 Canvas 实现的,底层定义了 DomCanvas 和 BitmapCanvas 两种图形接口,会把传来的 layer tree 渲染成浏览器的 Element tree,但是节点上仅包含了 position, transform, opacity 之类的样式,只用到 CSS 很小的一个子集,一些更复杂的绘制直接用 2D canvas 实现。 存在的问题 我编译了一个还算复杂的 demo 试了一下,性能很不理想,滑动不流畅,有时候图片还会闪动。生成出来的 js 代码有 1.1MB (minify 之后,未 gzip),节点层次也比较深,我评估这个页面用前端写不会超过 300KB,节点数可以少一半以上。 另外再看一下 Flutter 仓库的 issue,过滤出 platfrom-web 相关的,可以看到大量:文字编辑失效、找不到光标、ListView 在 ios 上不可滚动、checkbox/button 行为不正常、安卓滚动卡顿图片闪烁、字体失效、某些机型视频无法播放、文字选中后无法复制、无法调试…… 感觉 flutter for web 已经陷入泥潭,让人回想起前端当年处理各种浏览器兼容性的噩梦。 这些性能和兼容性问题,核心原因是浏览器未暴露足够的底层能力,以及浏览器处理手势、用户输入和方式和 Flutter 差异巨大。 实现 Flutter Engine 需要的是底层的图形接口和系统能力,虽然canvas 提供了相似的图形接口,如果全部用 canvas 实现的话很难处理可访问性、文本选择、手势、表单等问题,也会存在很多兼容性问题。所以真实方案里用的是 Canvas + DOM 混合的方式,封装层次太高了,渲染链路太长。就好像 Flutter Framework 里进行了一顿猛如虎的操作之后,节点生成好了、布局算好了、绘制属性也处理好了,就差一个画布画出来了,然后交到浏览器手里,又生成一遍 Element,再算一遍布局,在处理一遍绘制,最终才交给了底层的图形库画出来。 再比如长页面的滚动,浏览器里只要一条 CSS (overflow:scroll) 就可以让元素可滚动,手势的监听以及页面的滚动以及滚动动画都是浏览器原生实现的,不需要与 JS 交互,甚至不需要重新 layout 和 paint,只需要 compositing。如上图所示,在 Flutter 中 Animation 和 Gesture 是用 Dart 实现的,编译过来就是 JS 实现的,浏览器本身并不知道这个元素是否可滚,只是不断派发 touchmove 事件,JS 根据事件属性计算节点偏移,然后运算动画,然后把 transform 或者新的 position 作用到节点上,然后浏览器再来一遍完整的渲染流程…… 优化方案 性能和兼容性的问题还是要解决的,短期内先把 issue 解掉,长线的优化方案,官方有两种尝试: 使用 CSS Painting API 做绘制。 a, 这是还处于提案状态的新标准,可以用 JS 实现一些绘制功能,自定义 CSS 属性。 b. 目前还未实现,需要等浏览器先把 CSS Houdini 支持好。 使用 WebAssembly 版本的 Skia 做绘制 https://skia.org/user/modules/canvaskit a, 这样可以发挥 wasm 的性能优势,并且保持 skia 功能的一致。但是目前 wasm 在浏览器环境里未必有性能优势,这里不展开讨论了。 b. 已经部分实现,参考这里的配置启用功能: https://github.com/flutter/flutter/issues/41062#issuecomment-533952994 这两个方案都是想更多的利用到浏览器的底层能力,只有浏览器暴露了更多底层能力,才能更好的实现 Flutter 的 Web Engine。不过这个要等挺久的时间,我们也参与不了,现阶段想要使用 flutter for web,还是得保持现有架构,一起参与进去把 issue 解决掉,优先保障功能,其次优化性能。 一种适应性更好的架构 如果理想化一点,能不能从架构角度让 Flutter 和 Web 生态融合的更好一些呢? 回顾文章最开始的官方架构图,上面是 Framework(Dart),下面是 Engine(C++),切分在 Foundation 这一层,双方之间的交互是几何图形信息。如果还保持这个架构,把切分层次划分的更靠上一些,如下图所示,划分在 Widgets 和 Rendering 这一层,理论上讲对 Flutter 的开发者来说是无感知的,因为上层的开发语言和 Widget 接口都是不变的。 切分在这一层,Framework 和 Engine 之间的交互就不再是几何图形而是节点信息,Widget 的组合、setState 响应式更新、Widget diff 都还在 Dart 中,展开后的 RenderObject 的布局、绘制、裁剪、动画全都在 C++ 中,不仅有更好的性能,还可以与 Engine 有更好的结合。 或者说,还原本保留 Engine 的设计,把下沉的这部分逻辑上划分成 Renderer,就有了如下三层的结构: 这样划分出来的每一层都有明确的定位: Framework: 开发框架。为开发者提供可编程 API,实现响应式的开发模式,提供细粒度 Widget 供开发者自由封装和组合。Renderer: 渲染引擎。专门实现布局、绘制、动画、手势的的处理,这部分功能相对独立,是可以与开发框架解耦的,也不必与特定语言绑定。Engine: 图形引擎。实现跨平台一致的图形接口,合成输入的层并绘制到屏幕上,处理好平台力的接入和适配。 这样切分除了有性能优势以外,也使得渲染引擎摆脱了对 Dart 的依赖,能够支持多种语言,也能支持多种开发模式。对接到 Dart VM 就可以用 Dart 写代码,对接到 JS 引擎就可以用 JS 写代码,对接到 JVM 还可以写 Java,但是无论怎么写,底层的渲染能力是一样的,一套统一的布局算法,动画和手势的处理行为也是一致的。 在这样的架构下,对接 Web 生态就更容易了。Dart 和 Widget 是前端不想要的,希望能换成 JS 和 CSS,但是又想要底层的跨平台一致渲染引擎,那从 Renderer 层开始对接就好了,绕过了所有不想要的,也保留了所有想要的。 要实现 Flutter for Web 也更简单了一些。在 Engine 层做对接,一直苦于浏览器透出的底层能力不够,如果是在 Renderer 之上做对接就更容易一些,基于 JS/CSS/DOM/Canvas 的能力封装出一套 Rendering 接口,供 Widget 调用就好了,这样可以使渲染链路更短一些,但是依然要处理 Widget 和 DOM/CSS 之间的兼容性问题。 再讨论一遍:为什么要对接? 技术上已经分析完了,要想搞定 Flutter 生态和 Web 生态的对接,需要投入很大的成本,所以真正决定做之前,要先讨论清楚为什么要做对接?到底要不要做对接? 首先 Google 官方对 Flutter 的定位就是个问题。Flutter 设计之初就是不考虑 Web 生态的,甚至在刻意回避,倡导的是更贴近原生的开发方式。我之所以在开头说不要对接,原因也很简单:两种技术设计理念不同,不是朝着一个方向发展的,生态不通,技术方案不通,强行融合很可能让彼此都丧失了优势。但是业界又有很多团队在做这种尝试,说明需求是存在的,如果 Google 抵制这个方向,那就不好做了。不过现在官方已经支持了 Flutter for Web,已经向 Web 生态迈了一步,未来是否进一步与 Web 融合,也是有可能的。 另外就是跨平台技术本身的问题,浏览器发展了二三十年,已经是个很强大的跨平台产品了,几乎是 Web 的代名词了,这一点无人能敌。但是也臃肿不堪,有大量历史包袱,性能和体验不够好,和 Native 的结合度差,尤其在移动和 IoT 平台。虽然硬件性能在不断提升,但这是所有软件共享的,浏览器的性能和体验总会比 Native 差一些,差的这一些很可能就是新业务和新场景的发挥空间。观察一下近几年新诞生的业务场景,很多都是利用到了 Native 新提供的能力才火爆起来的,如 AI/AR/ 视频 / 直播 等,有因为新的 Web API 而孵化生出来的商业模式吗? 原文链接: https://mp.weixin.qq.com/s?__biz=MzAxNDEwNjk5OQ==&mid=2650405725&idx=1&sn=0b7476f7c7c01df7fdafda578f9ceb98&chksm=83953345b4e2ba53917ac30b709c07be15bd1c2fd5ae2a8ecfbb129b3813f771621b8fac95ca&scene=27#wechat_redirect

剑曼红尘 2020-03-10 09:54:40 0 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 SQL审核 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 人工智能 阿里云云栖号 云栖号案例 云栖号直播