1. 首页
  2. IT资讯

一道题测出前端程序员的水平,快来看看你是属于哪一类?

“u003Cdivu003Eu003Cpu003E如下图,网页中有是个DIV,其内部的文字分别是0 ~ 9u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F2cd5fe9cddd344648f1134d7b4cc1aed” img_width=”1920″ img_height=”1080″ alt=”一道题测出前端程序员的水平,快来看看你是属于哪一类?” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E源代码如下:u003Cu002Fpu003Eu003Cpreu003E<!DOCTYPE html>u003Cbru003E<html lang=”en”>u003Cbru003E<head>u003Cbru003E <meta charset=”UTF-8″>u003Cbru003E <title>for sample<u002Ftitle>u003Cbru003E<u002Fhead>u003Cbru003E<style type=”textu002Fcss”>u003Cbru003E .container {u003Cbru003E width: 100%;u003Cbru003E }u003Cbru003E .container .item {u003Cbru003E margin: 10px auto;u003Cbru003E width: 100px;u003Cbru003E background: darkgrey;u003Cbru003E font-size: 50px;u003Cbru003E text-align: center;u003Cbru003E }u003Cbru003E<u002Fstyle>u003Cbru003E<body>u003Cbru003E<div class=”container”>u003Cbru003E <div class=”item”>0<u002Fdiv>u003Cbru003E <div class=”item”>1<u002Fdiv>u003Cbru003E <div class=”item”>2<u002Fdiv>u003Cbru003E <div class=”item”>3<u002Fdiv>u003Cbru003E <div class=”item”>4<u002Fdiv>u003Cbru003E <div class=”item”>5<u002Fdiv>u003Cbru003E <div class=”item”>6<u002Fdiv>u003Cbru003E <div class=”item”>7<u002Fdiv>u003Cbru003E <div class=”item”>8<u002Fdiv>u003Cbru003E <div class=”item”>9<u002Fdiv>u003Cbru003E<u002Fdiv>u003Cbru003E<u002Fbody>u003Cbru003E<u002Fhtml>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E那么问题来了: 如何用 简单且高效的方法将图中DIV中的文字倒序排列成下面的结果呢?u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F64a4c23915ab47a38b61c19b99c6e306″ img_width=”1920″ img_height=”1080″ alt=”一道题测出前端程序员的水平,快来看看你是属于哪一类?” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E小白程序员A: 这还不简单,直接FOR循环搞定,看我直接上代码。u003Cu002Fh1u003Eu003Cpreu003Ewindow.onload = function () {u003Cbru003E var items = document.querySelectorAll(‘.container > .item’); u002Fu002F 获取所有的DIVu003Cbru003E for (var i = 0; i < items.length; i++) { u002Fu002F 循环更改每个DIV内部的值u003Cbru003E var item = items[i];u003Cbru003E item.innerText = 9 – i;u003Cbru003E }u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003E普通程序员B:依老夫看来,A的做法是很不好的,他犯了DOM编程中的一个大忌,那就是 “不要试图用for循环来连续更改DOM元素”,因为每一次操作DOM的消耗都是很大的,还是看看我怎么写的吧!u003Cu002Fh1u003Eu003Cpreu003Ewindow.onload = function () {u003Cbru003E u002Fu002F 获取DIV个数u003Cbru003E var items = document.querySelectorAll(‘.container > .item’);u003Cbru003E var len_items = items.length;u003Cbru003E u002Fu002F 在内存中一次性创建好倒序后的结果u003Cbru003E u002Fu002F 这样就避免了循环更改DOM元素u003Cbru003E var fragment = document.createDocumentFragment();u003Cbru003E for(var i=0;i<len_items;i++){u003Cbru003E var item = document.createElement(‘div’);u003Cbru003E item.classList =[‘item’];u003Cbru003E item.innerText = i;u003Cbru003E fragment.appendChild(item);u003Cbru003E }u003Cbru003E u002Fu002F 向容器中插入结果u003Cbru003E var container = document.querySelector(‘.container’);u003Cbru003E container.innerHTML = ”;u003Cbru003E container.appendChild(fragment);u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003E大牛程序员C:为什么一定要用JS实现呢?why? 看看我的吧u003Cu002Fh1u003Eu003Cpu003Esetp1. 添加一个样式类u003Cu002Fpu003Eu003Cpreu003Eu002F*以元素中心为原点,旋转180度*u002Fu003Cbru003E.rotate {u003Cbru003E transform: rotate(180deg);u003Cbru003E transform-origin: center;u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Estep2. 将这个类应用到container上,结果如下:u003Cu002Fpu003Eu003Cpreu003E<div class=”container rotate”>u003Cbru003E …….u003Cbru003E<u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002F01f90c72-bba5-4aac-b343-70beb3e0569a” img_width=”182″ img_height=”288″ alt=”一道题测出前端程序员的水平,快来看看你是属于哪一类?” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E我们发现整个container都以它的中心为原点旋转了180度,这时候只需要将从container中的每个DIV再旋转180度,就得到最终结果了u003Cu002Fpu003Eu003Cpu003Estep3. 为每个item应用上rotate样式类u003Cu002Fpu003Eu003Cpreu003E<div class=”container rotate”>u003Cbru003E <div class=”item rotate”>0<u002Fdiv>u003Cbru003E <div class=”item rotate”>1<u002Fdiv>u003Cbru003E <div class=”item rotate”>2<u002Fdiv>u003Cbru003E <div class=”item rotate”>3<u002Fdiv>u003Cbru003E <div class=”item rotate”>4<u002Fdiv>u003Cbru003E <div class=”item rotate”>5<u002Fdiv>u003Cbru003E <div class=”item rotate”>6<u002Fdiv>u003Cbru003E <div class=”item rotate”>7<u002Fdiv>u003Cbru003E <div class=”item rotate”>8<u002Fdiv>u003Cbru003E <div class=”item rotate”>9<u002Fdiv>u003Cbru003E<u002Fdiv>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E再看看结果:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002F4f0e2d11-c59a-41f0-9b60-cb2d5c7e433f” img_width=”219″ img_height=”288″ alt=”一道题测出前端程序员的水平,快来看看你是属于哪一类?” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E大功告成!!!!!!!!u003Cu002Fpu003Eu003Cpu003E你学会了吗?u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:一道题测出前端程序员的水平,快来看看你是属于哪一类?

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11258.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code