subject 关于网页上的复选框checkbox的checked和value的问题
这个问题相信很多像我一样的非专业开发者遇到过,就是感觉checkbox是一个神奇的存在,为什么这么说?就是在开发网页过程中,有时候使用checkbox一切顺利,提交表单的时候用JavaScript检查它的checked或value的状态或取值都一切正常;但是又有些时候,无论在JavaScript中怎么折腾,感觉这个checkbox一点儿不听话,明明已经选中了,checked的状态始终不变,真是头疼。
当然,上网学习过,MDN的标准答案是:
如果一个复选框在其表单被提交时没有被选中,就不会有任何代表其未被选中的状态(例如 value=unchecked)的值被提交给服务器——该值根本就没有被提交给服务器!如果你想在复选框未被选中时提交一个默认值,你可以在表单中加入一个具有相同的 name 和 value 的 <input type="hidden"> 字段,它可以由 JavaScript 生成。
checked:
一个布尔属性,表示该复选框是否被默认选中(当页面加载时)。它不表示这个复选框当前是否被选中:如果复选框的状态被改变,这个内容属性不反映这个变化。此时,只有 HTMLInputElement 的 IDL 属性 checked 会更新。
怎么样?是不是好像弄懂了一点东西,但是好像又不是特别明白的样子。假如一个复选框的状态被改变,checked属性不反映这个变化!这时什么意思?如果不变化,那么为什么有些页面它表现又那么正常呢?
经过认真学习思考,我终于得到了我自己的结论,可以翻译成大白话,是个程序员都能明白:
就是复选框在form表单中提交的时候,它会很正常!!!划重点,在“表单中提交时”,一个字也不能少!!!其实MDN的解释里有说,只是没有太过强调罢了。再翻译一下,先假设有这么个场景:
如果为了方便用户,比如在用户设置某些选项时,希望把复选框当成一个开关来用,选中表示“开”,不选中表示“关”,直接根据复选框状态后台就更新数据库里的状态,而不需要用户有提交表单的动作。假如你此时 没.有. 在页面中制作一个表单,只是 单.独. 一个复选框,然后希望用JavaScript来处理后续,那么你就惨了,你会发现无论你怎么折腾,貌似都不能得到当前复选框的“checked”状态,挠头吧?!
其实,这是对的,因为复选框本来就是这个德行,没有表单的提交动作,checked状态是不会跟着用户的鼠标点击勾选而变化的,你只是在页面上看到了框里多了一个勾或变成了一个空的框框,就只是“看到”而已。
那么,假如想在页面上实现前述功能,想让复选框像个开关一样直接起作用的话怎么做?
答案也很简单,如果不想麻烦而使用表单来实现,就扔掉checkbox,换言之就可以只是把checkbox当一个摆设,只是给用户的眼睛看状态,就好了呀!真正用JavaScript处理的东西可以是和checkbox一点关系都没有的,比如我们可以在JS里设一个变量来记录,或者给页面上某个dom元素添加一个属性来记录我们需要的状态,比如:<div id='switch' status='0'></div>,用户点一下checkbox,我们就把“status”值在“0“和”1“之间做个变化,不要去读checked是true or false,直接读写switch元素的status属性值就好。
好吧,也许我的理解并不完全正确,但是以我目前的三脚猫水平而言,事实好像就是如此。
by: fanshome
visibility 2100
2023-06-03 16:45 (UTC)
subject php判断浏览器是否支持avif格式图片的一种方法
最新一代图片压缩格式avif非常好,图片缩小体积效果十分明显,各大公司的新版浏览器已经纷纷支持。
可是,可是!微软的edge到目前为止(2023-06)还没有支持avif,只支持webp,那么怎么办呢?
直接判断浏览器是否是edge并不可取,因为不支持avif的浏览器不止它一种,比较科学而省事的做法是判断浏览器请求头里的accept是否接受avif.
下面以php为例:
by: fanshome
visibility 2303
2023-06-10 12:35 (UTC)
subject 统计搜索引擎对网站地图文件或robots.txt的访问记录的一种方法
一般而言,各大搜索引擎都允许提交网站地图,例如网站根目录下的“sitemap.xml”文件,是xml格式的文本文件。当提交了网站地图后,搜索引擎蜘蛛来访时,可能会读取:http://www.domain.com/sitemap.xml,以获得你网站的所有链接,以便收录。
但是,我很好奇,这个网站地图到底被哪些搜索引擎来抓取了呢?抓取频次如何呢?
由于网站地图本身是文本文件,不能直接写入统计代码。虽然有些搜索引擎允许自定义网站地图文件后缀,例如可以是.php文件。但是为了统一起见,还是使用比较规范一点的xml后缀比较省事。再者,假如想统计robots.txt文件的访问记录呢?这个文件名可是全球统一没得改的。
一种方法是修改php.ini配置文件,找到 AddType application/x-httpd-php 这一行,在后面添加想要使用以php方式执行的文件后缀,比如xml,txt。我没有试过,怕带来不必要的麻烦。
我使用的方法,以apache2 web server为例,先改名网站根目录下的sitemap.xml和robots.txt,比如改成map.xml和bots.txt,然后在.htaccess文件(或者apache配置文件.conf)中定义重写规则,遇到访问的文件名不存在时,重写request uri到一个脚本文件,比如php。
下面以.htaccess文件为例:
by: fanshome
visibility 1364
2023-06-02 16:00 (UTC)
subject 使用Goodsync同步工具遭遇无法解决冲突的状况一例
Goodsync是一个非常好用的同步工具,适用于需要经常同步文件的人,比如程序员,或者业余开发者等等。尤其是其“自动同步”功能,可以说大大地提高了生产率,比以前用ftp工具一个一个文件上传、下载快速高效多了。
然后,使用中偶尔会遇到发生冲突的情况,尤其是文件改名、删除后再添加同名文件等等不常见的场景,不过一般人工选择一下同步方向,问题就能解决。
然而,昨天我却遭遇了一次无法解决的文件冲突,尝试了所有一般方法都不能解决,冲突始终存在,甚至在我强制删除左右两边的文件后试图再重建都不行,“冲突”始终都像鬼一样如影随形,害得我花了一个多小时才最终搞明白问题所在。下面说说具体经过,希望能帮到和我一样偶尔犯糊涂的人。
事情是这样的,我平时都用VMware的虚拟机当开发服务器,装的是linux server,所以,已经习惯了将名字较长的文件采用驼峰写法来方便识别,比如hello world,我一般习惯写成helloWorld的形式当文件名。然后写代码是在同一台机器上,windows 11下,用VS code,ssh到虚拟机的linux系统下的web服务器文件目录,直接编辑开发服务器上的文件,一直这么用,然后调试无误就用Goodsync同步到windows本机当备份。
如此正常搞了约半年多,突然被某个SEO优化的工具建议说,网站的URL最好是用全部小写的路径,因为有些程序、有些人会无视文件名中的大写字母,容易造成404错误。我一想,好像是的哦,比如微软网站上的某个网页检查工具的结果,就曾经自动把我的服务器文件路径名自动给全部转小写了。虽然一般情况下不会造成什么大的困扰,但是我想反正把名字改成小写也不算很麻烦,即使为了避免小概率错误也值得,于是就动手吧。
然后,我就把文件名从“helloWorld”改成了“helloworld”,为了保险起见,想着先做个备份,于是又把helloworld复制了一份,名字就用老的吧,就helloWorld好了。在把其它程序文件里大写的W统一改成小写后,试了一下一切正常,开始备份到本机硬盘,然后准备再通过本机同步到真实的服务器上投入实际使用。
这时,问题就开始了,Goodsync开始提示文件冲突,不让复制文件,无论我怎么折腾都不行,反正你能想到的一切方法我都试了,甚至把Goodsyn中的同步任务删了重建,把左右两边的_gsdata_文件夹也删了,总之什么都试了,还是不行。当时我的想法是,这个Goodsync一点也不“good”,我强制手工复制了文件它也不认,就是认个死理要报错!报错!!报错!!
就这样折腾了一个多小时,问题没解决,我都准备放弃使用Goodsyn了,用回老的ftp吧。就在这时,发现ftp也出问题了,helloWorld文件下载到本机也提示有问题。天啊,这时怎么回事?!仔细一看,说是“helloWorld”文件已存在,要覆盖吗?可是我仔细看了几十遍,本机目录下没有helloWorld啊,只有helloworld。
慢着慢着!我一拍脑袋,明白了,闹半天,这是windows啊,windows的文件名是不分大小写的,也就是说,windows下,"helloworld"和"helloWorld"这两个文件名是一样的!!!我怎么把这个给忘了!!!
都怪平时给linux带偏了,然后windows表面上是区分文件名大小写的,你把windows的文件复制到linux上的时候,原来是大写的地方它还是大写,忠实还原。
原来是我冤枉了Goodsync了,是我自己一时脑子进水,其实是跟windows较劲了一个多小时,生命里的一个多小时就这么白白浪费了,汗!
好吧,记之,万一还有傻子和我犯一样的错呢。
by: 130****4451
visibility 1922
2023-05-31 14:38 (UTC)
subject 使用favinavi网络收藏夹分享功能提高工作效率一例
favinavi人性化网络收藏夹提供了分享功能,就是用户可以将自己收藏、整理后的书签分享给自己的同学、同事或朋友等。
在某地政府部门工作的一位领导(这里为了方便起见,我们姑且称他为“张主任”吧),就职于地方政府的质量管理监督部门。为了保证自身工作的合法合规,他们部门需要经常查阅相关专业的法律、法规、制度、条例等。而这些内容,分布在不同的各类型网站上,有国家级的,有省一级的、地市级的等等,并且这些法规的具体内容会随着时间不断改变,如果不即时跟进,就可能造成工作上的失误。
于是热心又肯动脑筋的“张主任”就想,假如建一个网页,把工作中常用的法规网址和其它常用网址书签汇集到一起,由他来负责更新、编辑、梳理,这样,他所在政府部门的所有同事,只要有查询相关内容的需求,就可以直接访问这个网页,快速查询到最新、最全面、最权威的内容。
但是建一个大家可以访问的网站/网页并不容易,也没有必要。“张主任”想到了自己常用的favinavi网络收藏夹,正好可以用来解决他这个工作需求。于是他专门新注册了一个favinavi账号,用于收藏、分类、整理相关网址书签,然后把他建立的工作专用的收藏夹分享网址公布给了他几百个同事。于是,一个专业的、能随时动态调整的“法律法规”集就出现了,同事们工作中如有需要,随时访问这个分享网址便可,极大的提升了工作效率。假如有必要,同事们还可以“一键收藏”,把某个书签直接加入到自己的favinavi收藏夹中,方便日后访问。
favinavi除了可以整体分享您的书签收藏夹,还可以随意挑选部分书签生成一个专门的分享集,更加灵活方便。
假如您也有类似需求,不妨考虑使用 https://favinavi.com 。
by: fanshome
visibility 1620
2023-06-06 16:58 (UTC)
Demo
subject 使用CSS让大背景图片适应不同大小屏幕又一例
这个示例网页使用了一个较大的背景图片,并使用CSS的background-size属性和@media查询来确保这个图片在不同尺寸的终端屏幕上都能够自适应。在小于或等于768像素的屏幕上,字体大小和位置也会进行相应的调整。
注意:部分浏览器(比如微软的edge)不支持AVIF格式图片,所以演示时无法显示图片。
by: fanshome
visibility 1635
2023-06-03 06:06 (UTC)
Demo
subject 一个使用CSS/HTML将图像自适应屏幕的示例
在这个示例中,我们将图像的最大宽度设置为100%,并将高度设置为自动。此外,我们还添加了一个样式,以使图像居中于其容器元素中。这将确保图像在不同大小的屏幕上都能适当地缩放,不会失真或拉伸。
注意:部分浏览器(比如微软的edge)不支持AVIF格式图片,所以演示时无法显示图片。
by: fanshome
visibility 1585
2023-06-03 06:06 (UTC)
subject 如何获得高质量网站的外部链接
问了一下chatGPT这个问题,以下是它的回答,供大家参考:
获得高质量网站的外部链接是一个需要耐心和投入的过程,以下是几种获得高质量外部链接的方法:
1、内容营销:通过生产有价值的内容来吸引其他网站链接到你的网站。这些内容可以是博客文章、研究报告、指南等。
2、社交媒体:通过在社交媒体上建立和维护强大的个人品牌,吸引其他网站主和作者对你的网站进行引用链接。
3、建立关系:与其他网站主建立联系,并建立信任关系。这可以通过发送电子邮件、参加行业活动和参加论坛等方式完成。
4、捐赠和合作:向慈善机构或非营利组织捐款,并获得链接奖励。你也可以与其他网站合作,例如进行跨所属行业的联合出版。
5、分享你的经验:写成一本电子书、加入一个独立的博客以及在社交媒体上分享你如何获得高质量外部链接的经验,从而吸引其他网站主链接到你的网站。
需要注意的是,获得高质量外部链接需要保持耐心和恒心,并且不应该通过不正当的手段来获得链接,例如购买链接、垃圾邮件链接、链接交换等方式。
by: fanshome
visibility 1292
2023-05-26 15:23 (UTC)